//var webserviceUploadUrl="http://localhost:8881/upload/multipleImageUpload" var webserviceUploadUrl="http://180.163.105.110:8881/upload/multipleImageUpload" var myformList = []; //上传图片的方法 var myformList2 = []; function loadUpImgs() { // var imgesFile= document.getElementById("imgUpload").files; // console.log(imgesFile) // if(imgesFile.length==0){ // return; // } var myImgList = new Array(); var fileObj = document.getElementById("imgUploads").files[0]; var qualityimg; if(fileObj.size/1024 > 1025){ qualityimg=0.2 }else{ qualityimg=1 } var form = new FormData(); var form2 = new FormData(); photoCompress(fileObj, { quality: qualityimg }, function(base64Codes){ myImgList.push(base64Codes); var lengli = $(".dynamic_images ul li").length if(lengli<10){ var lengli = $(".dynamic_images ul li").length; $('#showimg').css("display","none"); for(var i=0;i"); } document.getElementById("picnum").innerText=lengli+'/10'; // document.getElementById('imgbase64').src = base64Codes; //console.log("压缩后:" +base64Codes + " " ); var bl = convertBase64UrlToBlob(base64Codes); myformList2.push(base64Codes); //console.log("file"+lengli) form.append("file"+lengli, bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象 form2.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象 // $.ajax({ // url: webserviceUploadUrl, // type: 'POST', // dateType: 'json', // contentType: "application/x-www-form-urlencoded; charset=utf-8", // data: form, // async: false, // cache: false, // contentType: false, // processData: false, // success: function (res) { // $(".dynamic_images ul").html(""); // var data =res.responseText // localStorage.setItem("datas", data); // localStorage.setItem("adddataimg", data); // $("#picnum")[0].innerHTML='0/10'; // $(".dynamic_images ul").append( // ""); // // applyToDB(); // // console.log(res[0].img) // //loadUpImg(i,sql); // } // }); } }); myformList.push(form); } function loadUpImg() { // var imgesFile= document.getElementById("imgUpload").files; // console.log(imgesFile) // if(imgesFile.length==0){ // return; // } var myImgList = new Array(); var fileObj = document.getElementById("imgUpload").files[0]; console.log(fileObj) var qualityimg; if(fileObj.size/1024 > 1025){ qualityimg=0.2 }else{ qualityimg=1 } var form = new FormData(); var form2 = new FormData(); photoCompress(fileObj, { quality: qualityimg }, function(base64Codes){ // console.log(showSize(base64Codes)) myImgList.push(base64Codes); myformList2.push(base64Codes); // debugger //console.log(myImgList) var lengli = $(".dynamic_images ul li").length if(lengli<10){ var lengli = $(".dynamic_images ul li").length; $('#showimg').css("display","none"); for(var i=0;i"); } document.getElementById("picnum").innerText=lengli+'/10'; // document.getElementById('imgbase64').src = base64Codes; //console.log("压缩后:" +base64Codes + " " ); var bl = convertBase64UrlToBlob(base64Codes); //console.log("file"+lengli) form.append("file"+lengli, bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象 form2.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象 console.log(form) // $.ajax({ // url: webserviceUploadUrl, // type: 'POST', // dateType: 'json', // contentType: "application/x-www-form-urlencoded; charset=utf-8", // data: form, // async: false, // cache: false, // contentType: false, // processData: false, // success: function (res) { // $(".dynamic_images ul").html(""); // var data =res.responseText // localStorage.setItem("datas", data); // localStorage.setItem("adddataimg", data); // $("#picnum")[0].innerHTML='0/10'; // $(".dynamic_images ul").append( // ""); // // applyToDB(); // // console.log(res[0].img) // //loadUpImg(i,sql); // } // }); } }); myformList.push(form); } /* function upLoadImg() { // var imgesFile= document.getElementById("imgUpload").files; // console.log(imgesFile) // if(imgesFile.length==0){ // return; // } var myImgList = new Array(); var fileObj = document.getElementById("imgUpload").files[0]; console.log(fileObj) var qualityimg; if(fileObj.size/1024 > 1025){ qualityimg=0.2 }else{ qualityimg=1 } var form = new FormData(); photoCompress(fileObj, { quality: qualityimg }, function(base64Codes){ // console.log(showSize(base64Codes)) myImgList.push(base64Codes); // debugger //console.log(myImgList) var lengli = $(".dynamic_images ul li").length if(lengli<10){ var lengli = $(".dynamic_images ul li").length; $('#showimg').css("display","none"); for(var i=0;i"); } document.getElementById("picnum").innerText=lengli+'/10'; // document.getElementById('imgbase64').src = base64Codes; //console.log("压缩后:" +base64Codes + " " ); var bl = convertBase64UrlToBlob(base64Codes); //console.log("file"+lengli) form.append("file"+lengli, bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象 console.log(form) // $.ajax({ // url: webserviceUploadUrl, // type: 'POST', // dateType: 'json', // contentType: "application/x-www-form-urlencoded; charset=utf-8", // data: form, // async: false, // cache: false, // contentType: false, // processData: false, // success: function (res) { // $(".dynamic_images ul").html(""); // var data =res.responseText // localStorage.setItem("datas", data); // localStorage.setItem("adddataimg", data); // $("#picnum")[0].innerHTML='0/10'; // $(".dynamic_images ul").append( // ""); // // applyToDB(); // // console.log(res[0].img) // //upLoadImg(i,sql); // } // }); } }); myformList.push(form) } */ function determineSubmit(){ var n=0; var pushlist=[]; for(var i=0;i"); if(n==myformList.length){ var data =JSON.stringify(pushlist); localStorage.setItem("datas", data); localStorage.setItem("adddataimg", data); Addfuntion(); } // console.log(res[0].img) //upLoadImg(i,sql); }, error: function (rs) { alert(rs) } }); } myformList = []; } /* 三个参数 file:一个是文件(类型是图片格式), w:一个是文件压缩的后宽度,宽度越小,字节越小 objDiv:一个是容器或者回调函数 photoCompress() */ function photoCompress(file,w,objDiv){ var ready=new FileReader(); /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ ready.readAsDataURL(file); ready.onload=function(){ var re=this.result; canvasDataURL(re,w,objDiv) } } function canvasDataURL(path, obj, callback){ var img = new Image(); img.src = path; img.onload = function(){ var that = this; // 默认按比例压缩 var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); var quality = 0.5; // 默认图片质量为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.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 图像质量 if(obj.quality && obj.quality <= 1 && obj.quality > 0){ quality = obj.quality; } // quality值越小,所绘制出的图像越模糊 var base64 = canvas.toDataURL('image/jpeg', quality); // 回调函数返回base64的值 callback(base64); } } /** * 将以base64的图片url数据转换为Blob * @param urlData * 用url方式表示的base64图片数据 */ function convertBase64UrlToBlob(urlData){ var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); } function showSize(base64url) { //获取base64图片大小,返回MB数字 var str = base64url.replace('data:image/jpeg;base64,', ''); var equalIndex = str.indexOf('='); if(str.indexOf('=')>0) { str=str.substring(0, equalIndex); } var strLength=str.length; var fileLength=parseInt(strLength-(strLength/8)*2); console.log("```````````````"+strLength); // 由字节转换为MB var size = ""; size = (fileLength/(1024 * 1024)).toFixed(2); console.log("```````````````"+size); var sizeStr = size + ""; //转成字符串 var index = sizeStr.indexOf("."); //获取小数点处的索引 var dou = sizeStr.substr(index + 1 ,2) //获取小数点后两位的值 if(dou == "00"){ //判断后两位是否为00,如果是则删除00 return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2) } return parseInt(size); } function delImg(obj) { var ul=obj.parentNode; var id = obj.id; // var id = obj.value; //console.log(obj) //console.log(myformList[0].get("file1")) var index=id.lastIndexOf("\_"); id=id.substring(index+1,obj.length); myformList.splice(index, 1); console.log(id) // arrList.splice(2,1); ul.removeChild(obj); var lengli = $(".dynamic_images ul li").length; document.getElementById("picnum").innerText=lengli+'/10'; if(lengli==0){ $('#showimg').css("display","table-cell"); } }