在网页中实现图片上传功能，当用户选择了图片文件后，想在页面中即时预览该图片，这个简单的需求在很久很久以前可以实现，后来因为安全性的问题被禁止直接访问本地文件了，所以又在很长很长一段时间里，想通过html直接预览用户选择的图片变得不可能，自从有了html5，这个功能又回来了，通过filereader可以轻松的实现这个功能。
只要在3e701519c4bde102649c97eab49f5c17文件表单元素中监听 onchange 事件，然后通过filereader读取图片文件，然后将读取的内容在中显示即可。示例代码如下：
document.getelementbyid('file').onchange = function(evt) { // 如果浏览器不支持filereader，则不处理 if (window.filereader) return ; var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { if (!f.type.match('image.*')) { continue ; } var reader = new filereader(); reader.onload = (function(thefile) { return function(e) { // img 元素 document.getelementbyid('previewimage').src = e.target.result; }; })(f); reader.readasdataurl(f); } }
以上就是用html5轻松实现图片预览的内容。
相关文章：
详解html5图片上传支持图片预览压缩及进度显示兼容ie6及标准浏览器
javascript实现图片预览和上传（兼容ie）代码分享
javascript进阶(八)js实现图片预览并导入服务器功能