多图操作
点击框上传一张图片，并生成另一个点击框可再点击上传，修改时获取相对路径赋值多张图片，带有点击图片放大查看效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <link rel="stylesheet" href="http://www.h5al.cn/js/preview.css"> <style type="text/css"> .mask1 { z-index: 3000; width: 100%; position: absolute; height: 100%; background: rgba(0,0,0,.3); top: 0px; left: 0px; display: none; } .loding{ width: 280px; height: 200px; position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -140px; text-align: center; color: #fff; } .submit_evaluation_pothos2{ float:left; margin-right:10px; } .picTemp{ display: inline-block; background: url("http://www.h5al.cn/img/zhanwei.jpg") center center no-repeat; background-size:100% 90%; width: 200px; height: 160px; } .picTempY{ display: inline-block; width: 200px; height: 160px; } .picTemp img{ width: 100%; max-width: 200px; max-height: 160px; vertical-align: middle; border:5px solid #dedede; } .picTempY img{ width: 100%; max-width: 200px; max-height: 160px; vertical-align: middle; border:5px solid #dedede; } </style> <body> <div class="mask1"></div> <div id="app"> <div class="zoomImgBox" id="zoomImgBox"> <div style="margin-left: 10px; background: #fff;z-index:1;height:100px;" class="zoomImgBox" id="submit_evaluation_commoditylist"></div> <div style="width:200px;"> <div v-bind:class="pic!=''?'picTempY':'picTemp'"> <img :src="pic" class="zoomImg" v-if="pic!=''"> </div> <div class="wzc" style="width:200px;margin: 0 auto;"> <input id="fb1" readonly labelposition="left" style="width:58px;background-color: #EEE;border: #B5B5B5 1px solid;display: none;" type="text" name="fb1" autocomplete="off" /> <input type="file" ref="fileRef" v-on:change="fileChange" accept="image/png,image/jpg,image/jpeg,image/bmp" id="file1" class="ffii" style="width:283px;height:30px;line-height:30px; display: none"> <button class="btn btn-app btn-danger btn-sm" id="scsltBtn" v-on:click="fb1Fn(3)">插入图片</button> <img src="http://www.h5al.cn/img/closer.png" v-on:click="reduceRow1" style="vertical-align: bottom;cursor: pointer;"> <input type="hidden" id="baseT1" name="baseTT" value=""> </div> </div> </div> </div> <input type="hidden" id="submit_evaluation_num" /> <input type="hidden" id="submit_evaluation_tid" /> <input type="hidden" id="submit_evaluation_servicenum" /> <input type="hidden" id="submit_evaluation_phototnum" /> </body> <script src="http://www.h5al.cn/js/vue.js"></script> <script src="http://www.h5al.cn/js/jquery-1.11.3.min.js"></script> <script src="http://www.h5al.cn/js/preview.js"></script> <script src="http://www.h5al.cn/js/localResizeIMG.js"></script> <script type="text/javascript"> $(function () { submit_evaluation_getlist() }) var vm = new Vue({ el: "#app", data: { CurID:'',//传入的编号 pic:'', pic1:'', curCTLJ:'' }, created() { this.CurID = Number($("#CurID").val()); }, mounted(){ this.getRJData() }, methods: { getRJData(){ var self = this $(".mask1").html("<center class='loding'><img src='http://www.h5al.cn/img/loading.gif'></center>") $(".mask1").fadeIn(150); setTimeout(()=>{ $(".mask1").html("") $(".mask1").fadeOut(150); //图片有就转成base64 //{CTLJ:'http://www.h5al.cn/img/1.jpg'};//有跨域问题不能转成base64，必须用本地路径 var info = {CTLJ:'./3.jpg',MBSJLJ1:'./1.jpg',MBSJLJ2:'./2.jpg'} // self.pic = info.CTLJ if(info.CTLJ != null && info.CTLJ != ''){ self.pic = info.CTLJ + '?v=' + Math.random() } $("#rqDate").val(info.RQ) var file_typename = info.CTLJ.substring(info.CTLJ.lastIndexOf('.'), info.CTLJ.length); $("#baseT1").attr('houzhui',file_typename)//后缀名 $("#baseT1").attr('addr',info.CTLJ)//url $("#file1").val(""); $("#fb1").val('');//文件名 var img = new Image(); img.src = info.CTLJ; img.onload = function () { //默认按比例压缩 var w = this.width,//img. h = this.height;//img. var quality = 0.7; // 默认图片质量为0.7 //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 创建属性节点 // var anw = document.createAttribute('width') // anw.nodeValue = w // var anh = document.createAttribute('height') // anh.nodeValue = h canvas.setAttribute("width", w);//anw canvas.setAttribute("height", h);//anh ctx.drawImage(this, 0, 0, w, h); // quality值越小，所绘制出的图像越模糊 var base64 = canvas.toDataURL('image/jpeg', quality); // 回调函数返回base64的值 // $("#baseT1").val(base64.split(',')[1]);//文件base64 $("#baseT1").val(base64);//文件base64 } var ary = [] if(info.MBSJLJ1){ ary.push(info.MBSJLJ1) } if(info.MBSJLJ2){ ary.push(info.MBSJLJ2) } if(info.MBSJLJ3){ ary.push(info.MBSJLJ3) } if(info.MBSJLJ4){ // ary.push(self.dealImage(info.MBSJLJ4)) ary.push(info.MBSJLJ4) } //获取的提供样本可按照您提供的图片设计图片，转为可编辑 $.each(ary,function(index,item){ setTimeout(function(){ var temp = "#submit_potho" + index gaiPotho(temp, index, item); },300) }) },1000) // $.ajax({ // type: 'post', // dataType: "json", // url: "/Reception/DingDan_RJ_GetModel?t=" + Math.random(), // data: { // DDID: this.CurID, // }, // cache: false, // async: true, // success: function (msg) { // console.log(msg) // }, // error:function(){ // $(".mask1").html("") // $(".mask1").fadeOut(150); // } // }); }, //保存退出 baocunFn(){ //图片有就传base64 var self = this var CT_Base64 = $("#baseT1").val() //顶部图片 var ary = [] var img = $('#submit_evaluation_commoditylist').find('.zoomImg').filter(function(index,item) { return $(item).attr("src"); }); var tp1 = '' var tp2 = '' var tp3 = '' var tp4 = '' img.each(function(index,item){ var curSrc = $(item).attr('src') //ary.push(curSrc) if(index==0){ tp1 = curSrc }else if(index==1){ tp2 = curSrc }else if(index==2){ tp3 = curSrc }else if(index==3){ tp4 = curSrc } // ary.push(curSrc.split(',')[1]) }) console.log(tp1,tp2,tp3,tp4) }, //vue版传图 fb1Fn:function(num){ this.chuantuFS = num //vue模拟点击事件 this.$refs.fileRef.dispatchEvent(new MouseEvent('click')) //this.$refs.fileRef.click() // $("#file1").click() }, fileChange:function(e){ var self = this // console.log(e.target.files); var file = e.target.files[0]; if (typeof file == 'undefined') { return } var file_typename = file.name.substring(file.name.lastIndexOf('.'), file.name.length); if (!self.flagHZ(file_typename)) { $("#baseT1").val("");//文件base64 $("#baseT1").prop('title', "");//文件名 $("#baseT1").attr('houzhui', "");//后缀名 $("#baseT1").attr('addr', "");//url $("#file1").val(""); $("#fb1").val('');//文件名 alert("请上传后缀名为：.png或.jpg或.jpeg或.bmp的文件"); return } $("#fb1").val(file.name);//文件名 var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = async function (ev) { // console.log(ev.target); // $("#baseT1").val(reader.result.split(',')[1])//文件base64 let result = this.result; let rrr = await self.dealImage(result, file,file_typename) // console.log(rrr); if(self.chuantuFS == 3){ //插入图片(不用去底色) $("#baseT1").val(rrr)//文件base64 self.pic = rrr self.pic1 = rrr self.curCTLJ = rrr $("#baseT1").prop('title', file.name)//文件名 $("#baseT1").attr('houzhui', file_typename)//后缀名 $("#baseT1").attr('addr', "")//url } }; }, reduceRow1:function(){ $("#baseT1").val("");//文件base64 this.pic = 'http://www.h5al.cn/img/zhanwei.jpg' this.pic1 = 'http://www.h5al.cn/img/zhanwei.jpg' this.curCTLJ = '' $("#baseT1").prop('title',"");//文件名 $("#baseT1").attr('houzhui',"")//后缀名 $("#baseT1").attr('addr',"")//url $("#file1").val(""); $("#fb1").val('');//文件名 }, flagHZ:function(str){ var flag = false; var ary = ['.png','.jpg','.jpeg','.bmp']; for(var i=0;i<ary.length;i++){ if(str == ary[i]){ flag = true break; } } return flag; }, //图片路径转base64 dealImage: function(path,file,file_typename){ return new Promise((resolve, reject) => { var img = new Image(); img.src = path; img.onload = function () { //默认按比例压缩 var originWidth = this.width,//img. originHeight = this.height;//img. var quality = 0.7; // 默认图片质量为0.7 //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 创建属性节点 // var anw = document.createAttribute('width') // anw.nodeValue = w // var anh = document.createAttribute('height') // anh.nodeValue = h // 最大尺寸限制 const maxWidth = 1600; const maxHeight = 1600; // 目标尺寸 let targetWidth = originWidth; let targetHeight = originHeight; if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > 1) { // 宽图片 targetWidth = maxWidth; targetHeight = Math.round(maxWidth * (originHeight / originWidth)) } else { // 高图片 targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); } } canvas.width = targetWidth; canvas.height = targetHeight; // context.clearRect(0, 0, targetWidth, targetHeight); canvas.setAttribute("width", targetWidth);//anw canvas.setAttribute("height", targetHeight);//anh ctx.drawImage(this, 0, 0, targetWidth, targetHeight); // quality值越小，所绘制出的图像越模糊 // console.log(file_typename.slice(1)); var base64 = canvas.toDataURL('image/png', quality); // 回调函数返回base64的值 // resolve(base64.split(',')[1]) // console.log(base64); resolve(base64) } }) }, //获取上次填写内容 hqsctxnrFn(){ var self = this $(".mask1").html("<center class='loding'><img src='http://www.h5al.cn/img/loading.gif'></center>") $(".mask1").fadeIn(150); setTimeout(function(){ $(".mask1").html("") $(".mask1").fadeOut(150); var info = {}//日期，插图 if(info.CTLJ != ''){ var rrr = '' setTimeout(async ()=>{ rrr = await self.getBase64(info.CTLJ) },1000) } // $.ajax({ // type: 'post', // dataType: "json", // url: "/Reception/DingDan_GetLast?t=" + Math.random(), // data: {}, // cache: false, // async: false, // success: function (msg) { // console.log(msg) // }, // error:function(){ // $(".mask1").html("") // $(".mask1").fadeOut(150); // } // }); },500) }, getBase64(imgUrl) { console.log(imgUrl); var self = this window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr.open("get", imgUrl, true); // 至关重要 xhr.responseType = "blob"; xhr.onload = function () { if (this.status == 200) { //得到一个blob对象 var blob = this.response; // console.log("blob", blob) // 至关重要 let oFileReader = new FileReader(); oFileReader.onloadend = function (e) { // 此处拿到的已经是 base64的图片了 let base64 = e.target.result; // console.log(base64) $("#baseT1").val(base64)//文件base64 self.pic = base64 self.pic1 = base64 self.curCTLJ = base64 }; oFileReader.readAsDataURL(blob); } } xhr.send(); }, } }) //上传图片 function submit_evaluation_getlist() { $("#submit_evaluation_num").val(1); var i = 0; var list = $("#submit_evaluation_commoditylist"); var str = ""; list.html(""); str += '<div class="submit_evaluation_columns">' + '<div class="sign_register_columns" style=" height: 110px; margin-bottom: 0; font-size: 12px; color: #333; position: relative; ">' + '<div style="position:absolute;top:0;left:0;width:100%;height:75px;">' + '<input type="hidden" id="imgFileStream' + i + '" />' + '<div style=" margin-bottom: 0; font-size: 12px; color: #333;" class="content' + i + '">' + '<div class="sign_register_column" style="width:100%;margin:0 0;border:none;text-align:center;min-height:100px;max-height:200px;overflow:hidden" >' + '<div class="submit_evaluation_pothos" >' + '</div>' + '<div class="submit_evaluation_pothos2" style="width:77px;height:77px;margin-top:10px;border:1px dashed #ccc;position:relative;" id="submit_potho' + i + '" onclick="submit_evaluation_potho(this,' + i + ')">' + '<img src="http://www.h5al.cn/img/camera.png" style="width:35px;height:35px;margin-top:15px;"/>' + '<dd style="width:100%;height:100%;position:absolute;top:0;left:0;margin-left:0;overflow: hidden;">' + '<img class="zoomImg" style="position:absolute;left:0;height:100%;cursor: pointer;" onload="AutoSize(this,80,80)"/>' + '</dd >' + '<input type="file" style="width: 100%; height: 77px;position:absolute;top:0;left:0; opacity: 0;border:1px dashed #ccc;cursor: pointer; ">' + '</div>' + '</div>' + '</div>' + '</div>' list.html(str) } var imgFileStream = ""; function submit_evaluation_potho(t, i) { // var input = $(t).find("input"); //console.log(input) $("#submit_evaluation_phototnum").val(input.length); input.localResizeIMG({ width: 1800, quality: 0.6, success: function (result) { //console.log(result) var num = parseFloat($(t).parent().find("div").length) - 1; if (num == 3) { $(".content" + i).css("height", "130px") } var img = new Image(); img.src = result.base64; $(t).find("img").eq(1).attr("src", img.src); // $(t).find("img").addClass("zoomImg"); var wid = parseFloat(img.width) var hei = parseFloat(img.height); if (wid > hei) { $(t).find("img").eq(1).css("height", "100%"); var aa = wid - hei; var bi = aa / 2 / hei; } else if (wid < hei) { $(t).find("img").eq(1).css("width", "100%"); var aa = hei - wid; var bi = (aa / 2 / wid).toFixed(2); } $(t).find("input").hide(); $(t).append('<img src="http://www.h5al.cn/img/closer.png" style="width: 20px; height: 20px;position:absolute;top:-9px;right:-9px;z-index:10;overflow: visible;cursor: pointer;" onclick="picquxiao(this,' + i + ')"/>') var geshu = parseFloat($(t).parent().find("div").length) - 1; imgFileStream = $("#imgFileStream" + i).val() // imgFileStream += $(t).parent().find("div").eq(geshu).find("img").eq(1).attr('src').split(',')[1]; imgFileStream += ";" + $(t).parent().find("div").eq(geshu).find("img").eq(1).attr('src').split(',')[1]; $("#imgFileStream" + i).val(imgFileStream) if (num >= 4) { return } $(t).parent().append('<div class="submit_evaluation_pothos2" style="width:77px;height:77px;margin-top:10px;border:1px dashed #ccc;position:relative" id="submit_potho" onclick="submit_evaluation_potho(this,' + i + ')">' + '<img src="http://www.h5al.cn/img/camera.png" style="width:35px;height:35px;margin-top:15px;"/>' + '<dd style="width:100%;height:100%;position:absolute;top:0;left:0;margin-left:0;overflow:hidden">' + '<img class="zoomImg" style="position:absolute;left:0;height:100%;cursor: pointer;" onload="AutoSize(this,80,80)"/>' + '</dd >' + '<p style="font-size:12px;margin-top:-10px;">' + num + '/4</p>' + '<input type="file" style="width: 100%; height: 100%;position:absolute;top:0;left:0; opacity: 0;border:0.01rem dashed #ccc;cursor: pointer;">' + '</div>'); } }) } //4连张赋值图片 function gaiPotho(t, i, src) { var base64 = '' if(src == '' || typeof src == 'undefined' || src ==null){ return } // console.log(t,i) var num = parseFloat($(t).parent().find("div").length) - 1; if (num == 3) { $(".content" + i).css("height", "130px") } var img = new Image(); img.src = src; // window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr.open("get", src, true); // 至关重要 xhr.responseType = "blob"; xhr.onload = function () { if (this.status == 200) { //得到一个blob对象 var blob = this.response; // console.log("blob", blob) // 至关重要 let oFileReader = new FileReader(); oFileReader.onloadend = function (e) { // 此处拿到的已经是 base64的图片了 base64 = e.target.result; $(t).find(".zoomImg").attr("src", base64); $(t).find(".zoomImg").attr("name", src); }; oFileReader.readAsDataURL(blob); } } xhr.send(); var wid = parseFloat(img.width) var hei = parseFloat(img.height); if (wid > hei) { $(t).find(".zoomImg").css("height", "100%"); var aa = wid - hei; var bi = aa / 2 / hei; } else if (wid < hei) { $(t).find(".zoomImg").css("width", "100%"); var aa = hei - wid; var bi = (aa / 2 / wid).toFixed(2); } $(t).find("input").hide(); $(t).append('<img src="http://www.h5al.cn/img/closer.png" style="width: 20px; height: 20px;position:absolute;top:-9px;right:-9px;z-index:10;overflow: visible;" onclick="picquxiao(this,' + (i+1) + ')"/>') var geshu = parseFloat($(t).parent().find("div").length) - 1; $("#imgFileStream" + i).val(src) if (num >= 4) { return } $(t).parent().append('<div class="submit_evaluation_pothos2" style="width:77px;height:77px;margin-top:10px;border:1px dashed #ccc;position:relative" id="submit_potho' + (i+1) + '" onclick="submit_evaluation_potho(this,' + (i+1) + ')">' + '<img src="http://www.h5al.cn/img/camera.png" style="width:35px;height:35px;margin-top:15px;"/>' + '<dd style="width:100%;height:100%;position:absolute;top:0;left:0;margin-left:0;overflow:hidden">' + '<img class="zoomImg" style="position:absolute;left:0;height:100%;" onload="AutoSize(this,80,80)"/>' + '</dd >' + '<p style="font-size:12px;margin-top:-10px;">' + num + '/4</p>' + '<input type="file" style="width: 100%; height: 100%;position:absolute;top:0;left:0; opacity: 0;border:0.01rem dashed #ccc;">' + '</div>'); } function picquxiao(t, i) { var num = $(t).parent().parent().find("div").length - 2; var div = $(t).parent().parent(); $(t).parent().remove(); if(num == 3){ $(".content" + i).css("height", "130px") var img = div.find("div").eq(3).find("img").eq(1).attr('src'); // console.log(div.find("div")); if (typeof img == 'undefined') { num = num - 1 div.find("p").text(num + "/4") } else { div.append('<div class="submit_evaluation_pothos2" style="width:77px;height:77px;margin-top:10px;border:1px dashed #ccc;position:relative" id="submit_potho" onclick="submit_evaluation_potho(this,' + i + ')">' + '<img src="http://www.h5al.cn/img/camera.png" style="width:35px;height:35px;margin-top:15px;"/>' + '<dd style="width:100%;height:100%;position:absolute;top:0;left:0;margin-left:0;overflow:hidden">' + '<img class="zoomImg" style="position:absolute;left:0;height:100%;cursor: pointer;" onload="AutoSize(this,80,80)"/>' + '</dd >' + '<p style="font-size:12px;margin-top:-10px;">' + num + '/4</p>' + '<input type="file" style="width: 100%; height: 100%;position:absolute;top:0;left:0; opacity: 0;border:0.01rem dashed #ccc;cursor: pointer;">' + '</div>'); } }else{ num = num - 1 if(num==0){ div.find("p").text("") }else{ div.find("p").text(num + "/4") } } imgFileStream = '' var geshu = $("#submit_potho" + i).parent().find("div").length; for (j = 1; j < geshu - 1; j++) { imgFileStream += ";" + $("#submit_potho" + i).parent().find("div").eq(j).find("img").eq(1).attr('src').split(',')[1]; } $("#imgFileStream" + i).val(imgFileStream) } function AutoSize(Img, maxWidth, maxHeight) { //console.log(Img) var image = new Image(); //原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响） image.src = Img.src; //当图片比图片框小时不做任何改变 if (image.width < maxWidth && image.height < maxHeight) { Img.width = maxWidth; Img.height = maxHeight; } else //原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放，反之以框的高为标准缩放 { if (maxWidth / maxHeight <= image.width / image.height) //原图片宽高比例 大于 图片框宽高比例 { Img.width = maxWidth; //以框的宽度为标准 Img.height = maxWidth * (image.height / image.width); if (Img.height < 80) { Img.height = 75; Img.width = 75; //Img.style.left = "-8px"; //Img.style.top = "0px"; } } else { //原图片宽高比例 小于 图片框宽高比例 Img.width = maxHeight * (image.width / image.height); Img.height = maxHeight; //以框的高度为标准 if (Img.width < 80) { Img.width = 75; Img.height = 75; //Img.style.left = "0px"; //Img.style.top = "-8px"; } } } } showZoomImg('.zoomImg', 'img'); </script> </html>
