| 标题 | HTML5图片预览实例分享 |
| 范文 | 这篇文章主要介绍了HTML5图片预览实例,需要的朋友可以参考下。 HTML5图片预览需要用到两种方法 1.URL 2.FileReader 直接上代码 代码如下: <!DOCTYPEHTML> <html> <head> <metacharset="utf-8"> <title>html5图片上传预览</title> <style> #preview{ width:300px; height:300px; overflow:hidden; } #previewimg{ width:100%; height:100%; } </style> <scriptsrc="../jquery/jquery-1.8.3.js"></script> <scripttype="text/javascript"> functionpreview1(file){ varimg=newImage(),url=img.src=URL.createObjectURL(file) var$img=$(img) img.onload=function(){ URL.revokeObjectURL(url) $('#preview').empty().append($img) } } functionpreview2(file){ varreader=newFileReader() reader.onload=function(e){ var$img=$('<img>').attr("src",e.target.result) $('#preview').empty().append($img) } reader.readAsDataURL(file) } $(function(){ $('[type=file]').change(function(e){ varfile=e.target.files[0] preview1(file) }) }) </script> </head> <body> <formenctype="multipart/form-data"action=""method="post"> <inputtype="file"name="imageUpload"/> <divid="preview"style="width:300px;height:300px;border:1pxsolidgray;"></div> </form> </body> </html> 其中URL.revokeObjectURL方法Opera不支持，FileReader除IE9及以下不支持，其它浏览器都支持。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。