经常遇到表单上传图片，使用原生 HTML 的 input file，通常都是把图片上传到服务器，返回图片地址，重新设置图片的src 。
其实不上传服务器也可以把图片显示出来的，这样可以减少对服务器的请求，并减少服务器端的垃圾图片。
具体做法，现在通过Html5 的 FileReader 接口就可以轻松实现，提到Html5 大家会问： “那个恶心的IE怎么做呢？” 其实IE可以通滤镜来实现的
IE6直接设置src 为图片地址就可以显示的。废话不多说了直接上代码。
<html> <head> <title></title> <script src="Scripts/jquery-1.11.2.js"></script> <style type="text/css"> img {width: 400px;height: 300px;} form {position: absolute;top: -2000px;} label {background-color: blue;padding: 6px 12px;color: #fff;} </style> </head> <body> <form method="POST" style=""> <input type="file" id="file" /> </form> <img id="image" alt=""/> <br/> <br/> <!-- 在这里用了lable控件，原始的file控件实在是太丑了 --> <!-- 在IE 里如果用 click 模拟点击 file控件 提交表单时会报 无法访问的错误，所以在这里用了 for="file" 来避免 --> <label for="file">提交</label> <script> $(function () { $("#file").change(function () { selectImg(this, "image", function () { alert("处理完成"); }); }); function selectImg(file, imgId, readyCallback) { ///<summary>图片选择</summary> ///<param name="file" type="Object">input file 控件</param> ///<param name="imgId" type="string">img 控件id</param> ///<param name="readyCallback">处理成功后回调方法</param> var isIe = navigator.userAgent.match(/MSIE/) != null; var pic = document.getElementById(imgId); if (isIe) { var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase(); // gif在IE浏览器暂时无法显示 if (ext !== "png" && ext !== "jpg" && ext !== "jpeg") { window.util.messager("警告", "图片的格式必须为png或者jpg或者jpeg格式!"); return; } file.select(); var path = document.selection.createRange().text; var picWidth = pic.width; if (picWidth > 0) { pic.style.width = picWidth; pic.style.height = pic.height; } var isIe6 = navigator.userAgent.match(/MSIE 6.0/) != null; // IE6浏览器设置为本地路径 if (isIe6) { pic.src = path; } else { // 非IE6版本可以通过滤镜来实现,sizingMethod 为 image 时显示原始图片，scale 自适应容器大小,可以根据需求设置 pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src="" + path + "")"; // 设置img的src为base64编码的透明图片 取消浏览器默认图片 pic.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="; } if (typeof readyCallback === "function") readyCallback(); } else { if (!file.files || !file.files[0]) return; var reader = new FileReader(); reader.onload = function (evt) { pic.src = evt.target.result; if (typeof readyCallback === "function") readyCallback(); } reader.readAsDataURL(file.files[0]); } } }); </script> </body> </html>