h5 端图片上传-模拟多张上传

Posted 2020-10-14 我爱小明

1、由于后端的限制，上传图片到服务器只能的一张一张传
2、显示图片预览是本地的图片
3、根据服务器返回的结果拿到相应的路径保存到提交评论的接口中
4、删除的时候，需要删除对应的路径，不要把删除的提交到评论的接口中

A、comment-detail.js

var status = common.getQueryStr("status");
var subsId = common.getQueryStr("subsId");
var isList = common.getQueryStr("isList");
var prodId = common.getQueryStr("prodId");

var CommentDetail = {
    point : 5,
    commentCon: ‘‘,
    uploadImg:[],
    everyUploadCount:0,
    layerLoadingIndex:null,
    submitComment : function (param) {
        var obj = param.obj;
        obj.click(function(){
            var url = ‘/app/comment‘;
            if(CommentDetail.commentCon.length<10){
                alert("文字最少限制10字");
                return;
            }
            if(CommentDetail.commentCon.length>500){
                alert("文字最多限制500字");
                return;
            }
            var imagesUrl = ‘‘;
            for(var i=0;i<CommentDetail.uploadImg.length;i++){
                if(i==CommentDetail.uploadImg.length-1){
                    imagesUrl += CommentDetail.uploadImg[i].savepath;
                }else{
                    imagesUrl += CommentDetail.uploadImg[i].savepath +‘,‘;
                }
            }
            var params = {
                "reqBody":{
                    "bossProdId" : prodId,
                    "content" : CommentDetail.commentCon,
                    "subsId" : subsId,
                    "score" : CommentDetail.point,
                    "images": imagesUrl
                }
            }
            common.ajax("POST",url,params,null,function (ret) {
                if(ret.resultCode==0){
                    alertDialog(‘提交成功‘,function () {
                        $("#go-to-back").click();
                    });
                }
            });
        });
    },
    imgFileUpload : function () {
        var input = document.getElementById("imgFileUpload");
        var result,div;

        if(typeof FileReader===‘undefined‘){
            result.innerhtml = "抱歉，你的浏览器不支持 FileReader";
            input.setAttribute(‘disabled‘,‘disabled‘);
        }else{
            input.addEventListener(‘change‘,readFile,false);
        }
        function readFile(){
            var files = this.files;
            var liLength= $("#commentImgList li.li-img").length;
            var count = files.length>6-liLength ? 6-liLength : files.length;
            CommentDetail.everyUploadCount = count;
            CommentDetail.layerLoadingIndex = layer.open({
                type: 2
                ,content: ‘加载中‘
                ,shadeClose:false
            });
            for(var i=0;i<count;i++){
                if (!input[‘value‘].match(/.jpg|.gif|.png|.bmp/i)){
                    return alert("上传的图片格式不正确，请重新选择")
                }
                var item = files[i];
                (function(img) {
                    var mpImg = new MegaPixImage(img);
                    var resImg = document.createElement("img");
                    var items = item;
                    resImg.file = img;
                    mpImg.render(resImg, { maxWidth: 1280, maxHeight: 960, quality: 1 }, function() {
                        var wdh = Number(resImg.width)>Number(resImg.height)? true : false;
                        var commentListLiHeight = Number((window.screen.width)*0.92*0.3).toFixed(1);
                        if(wdh){
                            var htmlStr = ‘<li class="li-img"><a style="height: ‘+commentListLiHeight+‘px" href="javascript:;"><img src="‘+resImg.src+‘" class="dataImg" onclick="CommentDetail.initSwiper(this)" style="width: 100%;"></a><i class="icon-del" onclick="CommentDetail.delImage(this,\‘‘+items.name+‘\‘)"></i></li>‘
                        }else{
                            var htmlStr = ‘<li class="li-img"><a style="height: ‘+commentListLiHeight+‘px" href="javascript:;"><img src="‘+resImg.src+‘" class="dataImg" onclick="CommentDetail.initSwiper(this)" style="height: 100%;"></a><i class="icon-del" onclick="CommentDetail.delImage(this,\‘‘+items.name+‘\‘)"></i></li>‘
                        }
                        $("#commentImgList").prepend(htmlStr);
                        CommentDetail.uploadShowHide();
                        CommentDetail.fileUpload(resImg.src, item.type,items.name);
                    });
                })(item);
            }
        }
    },
    fileUpload: function(data,type,name) {
        var opts = {
            ‘file‘:name.slice(0,name.lastIndexOf(‘.‘)),
            ‘url‘:"/js/ueditor/jsp/uploader.jsp?action=uploaduser&dirName=comment&needCompress=true"
        };
        if(type.indexOf(‘jpeg‘)>-1) type=‘image/jpg‘;
        var text = window.atob(data.split(‘,‘)[1]);
        var ia = new Uint8Array(text.length);
        for (var i = 0; i < data.length; i++) {
            ia[i] = text.charCodeAt(i);
        };

        var Builder = window.WebKitBlobBuilder || window.MozBlobBuilder;
        var blob;

        if (Builder) {
            var builder = new Builder();
            builder.append(ia);
            blob = builder.getBlob(type);
        } else {
            blob = new window.Blob([ia], {type: type});
        }
        var fd = new FormData();
        fd.append(opts.file, blob);
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("load", opts.success, false);
        xhr.addEventListener("error", opts.error, false);
        xhr.open("POST", opts.url);
        xhr.send(fd);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                CommentDetail.everyUploadCount--;
                var ret = JSON.parse(xhr.responseText);
                console.log(ret);
                console.log(ret.state);
                if(ret.state==‘SUCCESS‘){
                    CommentDetail.uploadImg.push({"original":ret.original,"savepath":ret.savepath});
                }

                if(CommentDetail.everyUploadCount==0){
                    layer.close(CommentDetail.layerLoadingIndex);
                }
            }
        };
    },
    delImage : function(obj,name){
        console.log(‘删除前：‘,CommentDetail.uploadImg)
        for(var i=0;i<CommentDetail.uploadImg.length;i++){
            var original = CommentDetail.uploadImg[i].original.slice(0,CommentDetail.uploadImg[i].original.lastIndexOf(‘.‘));
            var delName = name.slice(0,name.lastIndexOf(‘.‘));
            if(original == delName){
                CommentDetail.uploadImg.splice(i,1);
            }
        }
        console.log(‘删除后：‘,CommentDetail.uploadImg)
        $(obj).parents(‘li‘).remove();
        CommentDetail.uploadShowHide();
    },
    initSwiper : function (obj) {
        var img = $("#commentImgList").find(‘.li-img‘).find(‘img‘);
        var index = $(obj).parents(‘li.li-img‘).index();
        var html = ‘‘;
        html += ‘<div class="swiper-container swiper-container-comment" id="swiperContainer" style="display:block;"><div class="swiper-wrapper">‘;
        for(var i=0;i<img.length;i++){
            html += ‘<div class="swiper-slide ui-flex justify-center center">‘ +
                ‘<img src="‘+img[i].src+‘" onclick="CommentDetail.closeSwiper()">‘ +
                ‘</div>‘;
        }
        html += ‘</div><div class="swiper-pagination"></div></div>‘;
        $(‘body‘).append(html);
        new Swiper (‘#swiperContainer‘, {
            loop: true,
            initialSlide:index,
            pagination: ‘.swiper-pagination‘,
            paginationType : ‘fraction‘
        })
    },
    closeSwiper : function () {
        $("#swiperContainer").remove();
    },
};

$(function () {
    CommentDetail.submitComment({obj:$("#btnSubmitComment")});
    CommentDetail.imgFileUpload()
});

B、HTML

 <ul class="list" id="commentImgList" data-pswp-uid="1">
     <li class="li-file">
         <img src="images/input-file-default.png"  style="width:100%;">
         <input type="file" class="img-file" id="imgFileUpload"  multiple/>
     </li>
 </ul>
 <a href="javascript:;" class="btn-submit" id="btnSubmitComment">提交</a>

C、megapix-image.js (https://github.com/stomita/ios-imagefile-megapixel)

/**
 * Mega pixel image rendering library for ios6 Safari
 *
 * Fixes iOS6 Safari‘s image file rendering issue for large size image (over mega-pixel),
 * which causes unexpected subsampling when drawing it in canvas.
 * By using this library, you can safely render the image with proper stretching.
 *
 * Copyright (c) 2012 Shinichi Tomita <[email protected]>
 * Released under the MIT license
 */
(function() {

  /**
   * Detect subsampling in loaded image.
   * In iOS, larger images than 2M pixels may be subsampled in rendering.
   */
  function detectSubsampling(img) {
    var iw = img.naturalWidth, ih = img.naturalHeight;
    if (iw * ih > 1024 * 1024) { // subsampling may happen over megapixel image
      var canvas = document.createElement(‘canvas‘);
      canvas.width = canvas.height = 1;
      var ctx = canvas.getContext(‘2d‘);
      ctx.drawImage(img, -iw + 1, 0);
      // subsampled image becomes half smaller in rendering size.
      // check alpha channel value to confirm image is covering edge pixel or not.
      // if alpha value is 0 image is not covering, hence subsampled.
      return ctx.getImageData(0, 0, 1, 1).data[3] === 0;
    } else {
      return false;
    }
  }

  /**
   * Detecting vertical squash in loaded image.
   * Fixes a bug which squash image vertically while drawing into canvas for some images.
   */
  function detectVerticalSquash(img, iw, ih) {
    var canvas = document.createElement(‘canvas‘);
    canvas.width = 1;
    canvas.height = ih;
    var ctx = canvas.getContext(‘2d‘);
    ctx.drawImage(img, 0, 0);
    var data = ctx.getImageData(0, 0, 1, ih).data;
    // search image edge pixel position in case it is squashed vertically.
    var sy = 0;
    var ey = ih;
    var py = ih;
    while (py > sy) {
      var alpha = data[(py - 1) * 4 + 3];
      if (alpha === 0) {
        ey = py;
      } else {
        sy = py;
      }
      py = (ey + sy) >> 1;
    }
    var ratio = (py / ih);
    return (ratio===0)?1:ratio;
  }

  /**
   * Rendering image element (with resizing) and get its data URL
   */
  function renderImageToDataURL(img, options, doSquash) {
    var canvas = document.createElement(‘canvas‘);
    renderImageToCanvas(img, canvas, options, doSquash);
    return canvas.toDataURL("image/jpeg", options.quality || 0.8);
  }

  /**
   * Rendering image element (with resizing) into the canvas element
   */
  function renderImageToCanvas(img, canvas, options, doSquash) {
    var iw = img.naturalWidth, ih = img.naturalHeight;
    if (!(iw+ih)) return;
    var width = options.width, height = options.height;
    var ctx = canvas.getContext(‘2d‘);
    ctx.save();
    transformCoordinate(canvas, ctx, width, height, options.orientation);
    var subsampled = detectSubsampling(img);
    if (subsampled) {
      iw /= 2;
      ih /= 2;
    }
    var d = 1024; // size of tiling canvas
    var tmpCanvas = document.createElement(‘canvas‘);
    tmpCanvas.width = tmpCanvas.height = d;
    var tmpCtx = tmpCanvas.getContext(‘2d‘);
    var vertSquashRatio = doSquash ? detectVerticalSquash(img, iw, ih) : 1;
    var dw = Math.ceil(d * width / iw);
    var dh = Math.ceil(d * height / ih / vertSquashRatio);
    var sy = 0;
    var dy = 0;
    while (sy < ih) {
      var sx = 0;
      var dx = 0;
      while (sx < iw) {
        tmpCtx.clearRect(0, 0, d, d);
        tmpCtx.drawImage(img, -sx, -sy);
        ctx.drawImage(tmpCanvas, 0, 0, d, d, dx, dy, dw, dh);
        sx += d;
        dx += dw;
      }
      sy += d;
      dy += dh;
    }
    ctx.restore();
    tmpCanvas = tmpCtx = null;
  }

  /**
   * Transform canvas coordination according to specified frame size and orientation
   * Orientation value is from EXIF tag
   */
  function transformCoordinate(canvas, ctx, width, height, orientation) {
    switch (orientation) {
      case 5:
      case 6:
      case 7:
      case 8:
        canvas.width = height;
        canvas.height = width;
        break;
      default:
        canvas.width = width;
        canvas.height = height;
    }
    switch (orientation) {
      case 2:
        // horizontal flip
        ctx.translate(width, 0);
        ctx.scale(-1, 1);
        break;
      case 3:
        // 180 rotate left
        ctx.translate(width, height);
        ctx.rotate(Math.PI);
        break;
      case 4:
        // vertical flip
        ctx.translate(0, height);
        ctx.scale(1, -1);
        break;
      case 5:
        // vertical flip + 90 rotate right
        ctx.rotate(0.5 * Math.PI);
        ctx.scale(1, -1);
        break;
      case 6:
        // 90 rotate right
        ctx.rotate(0.5 * Math.PI);
        ctx.translate(0, -height);
        break;
      case 7:
        // horizontal flip + 90 rotate right
        ctx.rotate(0.5 * Math.PI);
        ctx.translate(width, -height);
        ctx.scale(-1, 1);
        break;
      case 8:
        // 90 rotate left
        ctx.rotate(-0.5 * Math.PI);
        ctx.translate(-width, 0);
        break;
      default:
        break;
    }
  }

  var URL = window.URL && window.URL.createObjectURL ? window.URL :
            window.webkitURL && window.webkitURL.createObjectURL ? window.webkitURL :
            null;

  /**
   * MegaPixImage class
   */
  function MegaPixImage(srcImage) {
    if (window.Blob && srcImage instanceof Blob) {
      if (!URL) { throw Error("No createObjectURL function found to create blob url"); }
      var img = new Image();
      img.src = URL.createObjectURL(srcImage);
      this.blob = srcImage;
      srcImage = img;
    }
    if (!srcImage.naturalWidth && !srcImage.naturalHeight) {
      var _this = this;
      srcImage.onload = srcImage.onerror = function() {
        var listeners = _this.imageLoadListeners;
        if (listeners) {
          _this.imageLoadListeners = null;
          for (var i=0, len=listeners.length; i<len; i++) {
            listeners[i]();
          }
        }
      };
      this.imageLoadListeners = [];
    }
    this.srcImage = srcImage;
  }

  /**
   * Rendering megapix image into specified target element
   */
  MegaPixImage.prototype.render = function(target, options, callback) {
    if (this.imageLoadListeners) {
      var _this = this;
      this.imageLoadListeners.push(function() { _this.render(target, options, callback); });
      return;
    }
    options = options || {};
    var imgWidth = this.srcImage.naturalWidth, imgHeight = this.srcImage.naturalHeight,
        width = options.width, height = options.height,
        maxWidth = options.maxWidth, maxHeight = options.maxHeight,
        doSquash = !this.blob || this.blob.type === ‘image/jpeg‘;
    if (width && !height) {
      height = (imgHeight * width / imgWidth) << 0;
    } else if (height && !width) {
      width = (imgWidth * height / imgHeight) << 0;
    } else {
      width = imgWidth;
      height = imgHeight;
    }
    if (maxWidth && width > maxWidth) {
      width = maxWidth;
      height = (imgHeight * width / imgWidth) << 0;
    }
    if (maxHeight && height > maxHeight) {
      height = maxHeight;
      width = (imgWidth * height / imgHeight) << 0;
    }
    var opt = { width : width, height : height };
    for (var k in options) opt[k] = options[k];

    var tagName = target.tagName.toLowerCase();
    if (tagName === ‘img‘) {
      target.src = renderImageToDataURL(this.srcImage, opt, doSquash);
    } else if (tagName === ‘canvas‘) {
      renderImageToCanvas(this.srcImage, target, opt, doSquash);
    }
    if (typeof this.onrender === ‘function‘) {
      this.onrender(target);
    }
    if (callback) {
      callback();
    }
    if (this.blob) {
      this.blob = null;
      URL.revokeObjectURL(this.srcImage.src);
    }
  };

  /**
   * Export class to global
   */
  if (typeof define === ‘function‘ && define.amd) {
    define([], function() { return MegaPixImage; }); // for AMD loader
  } else if (typeof exports === ‘object‘) {
    module.exports = MegaPixImage; // for CommonJS
  } else {
    this.MegaPixImage = MegaPixImage;
  }

})();