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

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

源码如下:

<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

捐助共勉
版权声明:若无特殊注明,本文皆为原创,转载请保留文章出处。