| 标题 | 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及以下不支持，其它浏览器都支持。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。