在使用FileReader.readAsDataURL()时，处理不能不能连续选择同一个文件的问题

在现在的网页开发中，在用户上传图片时，一般都会在用户提供一下预览功能，html5的FileReader()可以直接用我们实现预览，而不用先上传到后台再实现预览，同时结合canvas可以让我们轻松的实现压缩图片


 

以下是核心代码

function readFile(obj) {
    var file = obj.target.files[0];
    　　  if (!file) {
       　　　　 return;
      　　}
　　// 判断类型是不是图片
　　if (!/image\/\w+/.test(file.type)) {
     　　hint("请确保文件为图像类型");
     　　return false;
　　}
　　if (Math.floor(file.size / 1024) > 1024 * 10) {
     　　hint("上传的图片不得大于10M");
      　　return;
　　}
　　// 如果大于2m的图片就进行压缩
　　shouldCompress = 0;
　　if (Math.floor(file.size / 1024) > 1024 * 2) {
    　　 shouldCompress = 1;
　　}
　　　　uiLoading.show();提示开始上传
       　　var reader = new FileReader();
      　　 reader.readAsDataURL(file);

       　　reader.onload = function(e) {这里的逻辑可以自定义，例如获取图片后放到哪里，增加删除操作等
          　　　　 var imageData = this.result;

        　　　　   var eDiv = document.createElement("div");

           　　　　eDiv.className = 'photo-view';
          　　　　 var removeBtn = document.createElement('i');//这里创建删除图片的标签
                　　  removeBtn.className = 'removeBtn';
                    　 removeBtn.setAttribute('data-index', target);
                 　　eDiv.appendChild(removeBtn);
                　　 var img = document.createElement('img');
               　　　　 img.src = imageData;
              　　  eDiv.appendChild(img);

                  　　var eDiv1 = document.createElement("div"),
                         eDiv2 = document.createElement("div");
                           eDiv1.className = "wrap-pic";
                           eDiv2.className = "span6";
                           eDiv1.appendChild(eDiv);
                          eDiv2.appendChild(eDiv1);
                       $productPhoto.parents('.span6').before(eDiv2);
         

         　　 /* 压缩图片 */
         　　 compressImg(imageData, (shouldCompress == 1 ? 0.3 : 0.7));

           }
              reader.onloadend = function() {
                  uiLoading.stop();//清除上传提示
         }
};

function compressImg(src, percent) {
　　var begintime = new Date().getTime();
　　var percent = percent || 0.7;
　　var oImg = new Image();
　　oImg.src = src;
　　oImg.onload = function() {
　　　　oCanvas.width = this.width;
　　　　oCanvas.height = this.height;
　　　　oCtx.clearRect(0, 0, this.width, this.height);
　　　　oCtx.drawImage(oImg, 0, 0);
　　　　var img = oCanvas.toDataURL('image/jpeg', percent).split('base64,')[1];

　　　　projectUrl.push(img);这里把base64保存起来传给后台

　　}
}

 

$productPhoto.on("change", function(e) {
　　 readFile(e);
　　$(this).val(''); //清除获取的值，为了可以连续上传同一张
})

 

参考链接：

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

http://www.zhangxinxu.com/wordpress/2017/07/html5-canvas-image-compress-upload/