下载DEMO：https://github.com/CaptainLiao/zujian/tree/master/Upload
1、fileReader.readAsDataURL(file)
2、window.URL.createObjectURL(file)
以上两种方法分别可以得到一个base64和一个blob对象的URL地址，从而实现预览。但是，他们只支持在IE10+，显然这是不够的，如何实现低版本IE浏览器的图片预览呢？代码如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" language="javascript"> $('#preview_fake').change(function () { previewImg($(this), $('#preview')); }); function previewImg($inputId, $previewId) { var inputId = $inputId[0], previewId = $previewId[0]; $previewId.empty(); if(/msie/.test(navigator.userAgent.toLowerCase())){ if($.support.version == 6.0){ $previewId.attr("src",inputId.value); }else{ inputId.select(); var reallocalpath = document.selection.createRange().text; previewId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale',src=\"" + reallocalpath + "\")"; // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片 previewId.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='; } }else { $previewId.attr("src",window.URL.createObjectURL(previewFake.files[0])); } } </script> </head> <body> <form runat="server"> <div> 选择图片：<input type="file" size="20"" /> </div> <div> </div> </form> </body> </html>
这样，我们就能够在IE10- 下预览上传的图片了。
在这里，有必要对几个参数说明一下，以免后人再入坑！
progid:DXImageTransform.Microsoft.AlphaImageLoader([enabled=bEnabled ,] [sizingMethod=sSize ,] src=https://www.jb51.net/sURL)
enabled： 可选。布尔值(Boolean)。设置或检索滤镜是否激活。
true：默认值。滤镜激活。
false：滤镜被禁止。
sizingMethod：可选。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop：剪切图片以适应对象尺寸。
image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale：缩放图片以适应对象的尺寸边界。
src： 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
以上，可以实现低版本IE浏览器的图片预览，但要上传到服务器还需要一番周折。对于单张图片，可以通过<form>表单提交，但对于多张图片，这需要flash技术的支持，实现起来相当麻烦。
这里，楼主推荐一个现有的轮子：webuploader 组件。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》