兼容各个浏览器的图片上传预览

在Web开发中不可避免的会做一些图片上传的功能，传统的图片上传是将图片上传至服务器之后，再将文件的URL返回回来，然后异步通过这个URL加载刚刚上传的图片，实现图片的预览，很明显的在这个过程中两次Web请求，一次发送文件，一次下载文件，到最后这个文件如果在客户端被删除（取消上传，弃用这次的上传），这整个过程都白费了。我们希望能够在图片上传之前就能进行图片的预览，提高用户的体验效果。

源码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

< html > < head >    < meta  charset = "UTF-8" >    < title >如梦技术IT-图片上传预览</ title >    < meta  http-equiv = "X-UA-Compatible"  content = "IE=edge" >    < meta  name = "viewport"  content = "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >    < meta  name = "format-detection"  content = "telephone=no" >    < meta  name = "renderer"  content = "webkit" >    < meta  http-equiv = "Cache-Control"  content = "no-siteapp" > </ head > < body > < input  type = "file"  id = "user-pic" > < img  id = "viewImg" > < script  src = "http://libs.baidu.com/jquery/1.11.1/jquery.min.js" ></ script > < script  type = "text/javascript" > //图片预览，兼容各个浏览器 function previewImage(file) {     var porImg  = $(file),         viewImg = $('#viewImg');     var image = porImg.val();     if (!/^\S*\.(?:png|jpe?g|bmp|gif)$/i.test(image)) {         layer.msg('请选择图片~', {shift: 6});         porImg.val("");         return false;     }     if (file["files"] && file["files"][0]) {         var reader = new FileReader();         reader.onload = function(evt){             viewImg.attr({src : evt.target.result});         }         reader.readAsDataURL(file.files[0]);     } else {         var ieImageDom = document.createElement("div");         var proIeImageDom = document.createElement("div");         $(ieImageDom).css({             float: 'left',             position: 'relative',             overflow: 'hidden',             width: '100px',             height: '100px'         }).attr({"id":"view"});         $(proIeImageDom).attr({"id": porImg.attr("id")});         porImg.parent().prepend(proIeImageDom);         porImg.remove();         file.select();         path = document.selection.createRange().text;         $(ieImageDom).css({"filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")"});     } }        //图片上传预览      $('#user-pic').change(function(e){          previewImage(this);      }); </ script > </ body > </ html >

效果演示：http://demo.dreamlu.net/image-upload-view.html