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

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()});

 <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>

/** * 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 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; ?}})();