本地上传图片预览

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了本地上传图片预览相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html >
<html >
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
<title>图片上传本地预览，获得图片的base64(可压缩)</title>     
<style type="text/css">
  .upload_image {
　　width: 800px;
  }
</style>
<script type="text/javascript" src="jquery.min.js"></script>
   
</head>     
<body>
<div id="preview">
    <img id="imghead" width=200 height=200 border=0 src=‘‘>
</div>   
    <canvas id="uploadImg" hidden></canvas>
    <input type="file" id="fileUp" multiple hidden />    
    <label for="fileUp">点击上传图片</label>
    <button id=‘sub‘>提交</button>

<script type="text/javascript">
    var imgUpload = {
      imgBase64Arr: [],
      html : ‘‘,
      onSelect: function(files) {
        var i =0;
        $("#preview").html(‘<div class="upload_loading"></div>‘);
          var funAppendImage = function() {
            file = files.files[i];
            if (file) {
              var reader = new FileReader()
              reader.onload = function(e) {
                imgUpload.html = imgUpload.html + ‘<div id="uploadList_‘ + i + ‘" class="upload_append_list"><p class="img-outbox"><strong>‘ + file.name + ‘</strong>‘ +
                  ‘<a href="javascript:" class="upload_delete" title="删除" data-index="‘ + i + ‘">删除</a><br />‘ +
                  ‘<img id="uploadImage_‘ + i + ‘" src="‘ + e.target.result + ‘" class="upload_image" /></p>‘ +
                  ‘<span id="uploadProgress_‘ + i + ‘" class="upload_progress"></span>‘ +
                  ‘</div>‘;
                i++;
                funAppendImage();
              }
              reader.readAsDataURL(file);
            } else {
              $("#preview").html(imgUpload.html);
              $(".upload_delete").click(function(){
                imgUpload.funDelteimg($(this).parents(".img-outbox"));
                // console.log(files.files[parseInt($(this).attr("data-index"))])
                // imgUpload.funDelteimg(files.files[parseInt($(this).attr("data-index"))]);
               }
              )
            }
          };
        funAppendImage();
      },
      funDelteimg: function(_this){
        console.log(_this)
        $(_this).remove();//只能删除dom，无法删除内存中的files.files
      },
      funCanvas : function(width, height, ratio, file){//重新绘制图片，获得img的base64
        var canvas = document.getElementById("uploadImg");
        var cxt = canvas.getContext(‘2d‘);
        canvas.width = width;
        canvas.height = height;
        var img = new Image();
        img.src = file;
        cxt.drawImage(img, 0, 0, width, height);
        var imgBase = canvas.toDataURL("image/jpeg", ratio);
        imgUpload.imgBase64Arr.push(imgBase);

        return imgUpload.imgBase64Arr;

      },
    }

    //文件上传
    $("#fileUp").change(function(){
      imgUpload.onSelect(this)
    })

    //获得所有img的 src,可以传给后端 
    $("#sub").click(function(){
      var getBase = $(".upload_image");

      getBase.each(function(){//重新绘制图片，减小base64字符串的长度
        imgUpload.funCanvas(640, 400, 0.6, $(this).attr("src"));
      })
      console.log(imgUpload.imgBase64Arr)
    })



</script>  
</body>     
</html>

　　这里图片上传的思路：获得上传后的img,将file的img 转成base64 ,作为前端预览，也可以将base64的字符串，传到后端，由后端生成图片，在传到后端前，可以将其base64的字符串压缩一下，这里的采取的一个方法就是用canvas的重新绘制图片，然后在canvas里就会有 新的base64字符串。

以上是关于本地上传图片预览的主要内容，如果未能解决你的问题，请参考以下文章

JS兼容各个浏览器的本地图片上传即时预览效果

JavaScript实现本地图片上传预览功能（兼容IEchromeFF）

微信小程序实现图片是上传预览功能

JQuery插件：图片上传本地预览插件，改进案例一则。

本地上传图片预览

本地图片的预览和上传