h5 端圖片上傳-模擬多張上傳

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" οnclick="CommentDetail.initSwiper(this)" style="width: 100%;"></a><i class="icon-del" οnclick="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" οnclick="CommentDetail.initSwiper(this)" style="height: 100%;"></a><i class="icon-del" οnclick="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+'" οnclick="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" alt="" 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 <shinichi.tomita@gmail.com>* 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 imagevar 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 canvasvar 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 flipctx.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 flipctx.translate(0, height);ctx.scale(1, -1);break;case 5:// vertical flip + 90 rotate rightctx.rotate(0.5 * Math.PI);ctx.scale(1, -1);break;case 6:// 90 rotate rightctx.rotate(0.5 * Math.PI);ctx.translate(0, -height);break;case 7:// horizontal flip + 90 rotate rightctx.rotate(0.5 * Math.PI);ctx.translate(width, -height);ctx.scale(-1, 1);break;case 8:// 90 rotate leftctx.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;}})();

?