wjs_app/js/fileImg.js

// var webserviceUploadUrl="http://localhost:8881/upload/multipleImageUpload"
var webserviceUploadUrl="http://180.163.105.110:8881/upload/multipleImageUpload";
var myformList = [];
var myformList2 = [];
//上传图片的方法
function loadUpImgs() {
					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<5){
										var lengli = $(".dynamic_images ul li").length;
                                        var lengli1 = ($(".dynamic_images ul li").length-0)+1;
										$('#showimg').css("display","none");
										for(var i=0;i<myImgList.length;i++){
											var j=i+1
											$(".dynamic_images ul").prepend("<li id='files_"+lengli+"' onclick='delImg(this)'><img src='" + base64Codes + "' id='upimgpush"+i+"'/><span class='del'></span></li>");
										}
										document.getElementById("picnum").innerText=lengli1+'/5';
										var bl = convertBase64UrlToBlob(base64Codes);
                                        myformList2.push(base64Codes);
										 form.append("file"+lengli, bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
                                        form2.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
										}
									});
								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);
												
												
												// debugger
												//console.log(myImgList)
												var lengli = $(".dynamic_images ul li").length;
												if(lengli<10){
													var lengli = $(".dynamic_images ul li").length;
                                                    var lengli1 = ($(".dynamic_images ul li").length-0)+1;
													$('#showimg').css("display","none");
													for(var i=0;i<myImgList.length;i++){
														var j=i+1
														$(".dynamic_images ul").prepend("<li id='files_"+lengli+"' onclick='delImg(this)'><img src='" + base64Codes + "' id='upimgpush"+i+"'/><span class='del'></span></li>");
														
													}
													
													
													document.getElementById("picnum").innerText=lengli1+'/5';
													// 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"); // 文件对象
													 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(
														// 		    "<img src='img/show.png' id='showimg'/>"); 
														// 		// 	applyToDB();
														// 	 // console.log(res[0].img)
														// 	   //loadUpImg(i,sql);
														// 	 }
														// 	});
													
													}
												
												});
											
											myformList.push(form)		;
			        }
			
			function determineSubmit(){
				var n=0;
				var pushlist=[];
			for(var i=0;i<myformList.length;i++){
				debugger
				$.ajax({
					url: webserviceUploadUrl,
				 	type: 'POST',
				 	dateType: 'json',
				 	contentType: "application/x-www-form-urlencoded; charset=utf-8",
				 	data:myformList[i],
				 	async: false,
				 	cache: false,
				 	contentType: false,
				 	processData: false,
				 	success: function (res) {
						n++;
						
						pushlist.push(res[0])
						
						$(".dynamic_images ul").html("");
				 		$("#picnum")[0].innerHTML='0/5';
				 		$(".dynamic_images ul").append(
				 		    "<img src='img/show.png' id='showimg'/>"); 
				 		 if(n==myformList.length){
							 var data =JSON.stringify(pushlist);
				 		 	localStorage.setItem("datas", data);
				 		 	localStorage.setItem("adddataimg", data);
				 		 	debugger
                             applyToDBNew();
				 		 }
				 	 // console.log(res[0].img)
				 	   //loadUpImg(i,sql);
				 	 } ,
					 error: function (xhr, textStatus, errorThrown) {
						     /*错误信息处理*/
						　　　　　　　　alert("进入error---");
						　　　　　　　　alert("状态码："+xhr.status);
						　　　　　　　　alert("状态:"+xhr.readyState);//当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
						　　　　　　　　alert("错误信息:"+xhr.statusText );
						　　　　　　　　alert("返回响应信息："+xhr.responseText );//这里是详细的信息
						　　　　　　　　alert("请求状态："+textStatus); 　　　　　　　　
						　　　　　　　　alert(errorThrown); 　　　　　　　　
						　　　　　　　　alert("请求失败"); 
                    }
				 	});
				
				}
				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;
         var lengli1 = ($(".dynamic_images ul li").length-0);
		document.getElementById("picnum").innerText=lengli1+'/5';
        if(lengli==0){
			$('#showimg').css("display","table-cell");
		}
     }