1、 HTML5 图片预览实例分享HTML5 图片预览需要用到两种方法1.URL2.FileReader直接上代码代码如下:!DOCTYPE HTMLhtmlheadmeta charset=“utf-8“titlehtml5 图片上传预览/titlestyle#preview width: 300px;height: 300px;overflow: hidden;#preview img width: 100%;height: 100%;/stylescript src=“./jquery/jquery-1.8.3.js“/scriptscript type=“text/javascript“f
2、unction preview1(file) var img = new Image(), url = img.src = URL.createObjectURL(file)var $img = $(img)img.onload = function() URL.revokeObjectURL(url)$(#preview).empty().append($img)function preview2(file) var reader = new FileReader()reader.onload = function(e) var $img = $(img).attr(“src“, e.tar
3、get.result)$(#preview).empty().append($img)reader.readAsDataURL(file)$(function() $(type=file).change(function(e) var file = e.target.files0preview1(file)/script/headbodyform enctype=“multipart/form-data“ action=“ method=“post“input type=“file“ name=“imageUpload“/div id=“preview“ style=“width: 300px;height:300px;border:1px solid gray;“/div/form/body/html其中 URL.revokeObjectURL 方法 Opera 不支持，FileReader 除 IE9 及以下不支持，其它浏览器都支持。
