HTML5图片预览需要用到两种方法 1.URL 2.FileReader直接上代码 复制代码代码如下: html5 图片上传预览 <br /> #preview {<br /> width: 300px;<br /> height: 300px;<br /> overflow: hidden;<br /> }<br /> #preview img {<br /> width: 100%;<br /> height: 100%;<br /> }<br /> <br /> function preview1(file) {<br /> var img = new Image(), url = img.src = URL.createObjectURL(file)<br /> var $img = $(img)<br /> img.onload = function() {<br /> URL.revokeObjectURL(url)<br /> $('#preview').empty().append($img)<br /> }<br /> }<br /> function preview2(file) {<br /> var reader = new FileReader()<br /> reader.onload = function(e) {<br /> var $img = $('<img alt="HTML5图片预览实例分享_html5教程技巧" >').attr("src", e.target.result)<br /> $('#preview').empty().append($img)<br /> }<br /> reader.readAsDataURL(file)<br /> }<br /> <br /> $(function() {<br /> $('[type=file]').change(function(e) {<br /> var file = e.target.files[0]<br /> preview1(file)<br /> })<br /> })<br /> 其中URL.revokeObjectURL方法Opera不支持,FileReader除IE9及以下不支持,其它浏览器都支持。