<tr> <td class="listtitle-up">尿素箱</td> <td> <div class="comtainerimg upimg-div floatleft"> <input type="hidden" value="" id="photo-4" name=""/> </div> <div class="z_photo floatleft" > <section class="z_file fl"> <img src="mrm/css/bigimg/a11.png" class="add-img"> <input type="file" name="file" id="file4" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp,image/PNG" multiple style="opacity: 0"/> </section> </div> <a class="removelist" href="javascript:"> <i class="fa fa-trash-o" ></i> <a> </td> </tr> <aside class="mask works-mask" style="display: none;"> <div class="mask-content"> <h3>刪除圖片</h3> <p class="del-p">您確定要刪除嗎?</p> <p class="check-p"><span class="del-com wsdel-ok"><i class="glyphicon glyphicon-ok"></i> 確定</span><span class="wsdel-no"><i class="glyphicon glyphicon-remove"></i>取消</span></p> </div> </aside>

$(function(){ var delParent; var defaults = { fileType : ["jpg","png","bmp","jpeg","PNG"], // 上傳文件的類型 fileSize : 1024 * 1024 * 10 // 上傳文件的大小 10M }; /*點擊圖片的文本框*/ var j=0; $(document).on('change','.file',function(){ var imgsrc= "";//聲明圖片的路徑 var creatarry=new Array(); // $(".file").change(function(){alert("1"); var idFile = $(this).attr("id"); var file = document.getElementById(idFile); var imgContainer = $(this).parents(".z_photo").siblings('.comtainerimg'); //存放圖片的父親元素 var fileList = file.files; //獲取的圖片文件 console.log(fileList+"======filelist====="); var input = $(this).parent();//文本框的父親元素 var imgArr = []; //遍歷得到的圖片文件 var numUp = imgContainer.find(".up-section").length; var totalNum = numUp + fileList.length; //總的數量 // 聲明新input var newinput="<input type='file' name='file' id='newfile' class='file' value='' accept='image/jpg,image/jpeg,image/png,image/bmp,image/PNG' multiple style='opacity: 0'/>"; // if(fileList.length > 5 || totalNum > 5 ){ // alert("上傳圖片數目不可以超過5個,請重新選擇"); //一次選擇上傳超過5個 或者是已經上傳和這次上傳的到的總數也不可以超過5個 // } // else if(numUp < 5){ fileList = validateUp(fileList); for(var i = 0;i<fileList.length;i++){ var imgUrl = window.URL.createObjectURL(fileList[i]); imgArr.push(imgUrl); var $section = $("<section class='up-section fl loading'>"); imgContainer.append($section); var $span = $("<span class='up-span'>"); $span.html(fileList[i].name).appendTo($section); var $img0 = $("<img class='close-upimg' src='/hvdm/r/mrm/css/bigimg/a7.png'>").on("click",function(event){ event.preventDefault(); event.stopPropagation(); $(".works-mask").show(); delParent = $(this).parent(); }); $img0.appendTo($section); var $a = $("<a rel='lightbox-group'>"); $a.attr("href",imgArr[i]); var $img = $("<img class='up-img up-opcity'>"); $img.attr("src",imgArr[i]); $img.appendTo($a); $a.appendTo($section); var $p = $("<p class='img-name-p'>"); $p.html(fileList[i].name).appendTo($section); var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>"); $input.appendTo($section); var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>"); $input2.appendTo($section); // imgsrc+=imgArr[i]+",";//循環 累加href值 imgsrc+=imgArr[i];//循環 累加href值 creatarry.push(imgArr[i]);//將href各個 值存入到數組中 } var srcval=imgContainer.find("section").siblings('input').val(); //第二次點擊添加圖片 之前的href鏈接地址; if(srcval){//如果有地址 說明是第二次點擊效果; var oldsrc=srcval.split(";"); //將之前存入的 鏈接 轉為數組 oldsrc.concat(creatarry); //並拼接 現在上傳點擊的圖片鏈接 imgContainer.find("section").siblings('input').val(oldsrc.concat(creatarry).join(';'));//並賦給 input值 setTimeout(function(){ //執行加載效果,結束事件 $(".up-section").removeClass("loading"); $(".up-img").removeClass("up-opcity"); },450); // console.log($('.file').val());$('.file').val(''); $(this).hide(); console.log($(this).val()); $(this).parents('.z_file').append("<input type='file' name='file' id='newfile" + j + "' class='file' value='' accept='image/jpg,image/jpeg,image/png,image/bmp,image/PNG' multiple style='opacity: 0'/>"); j=j+1; return false; } imgContainer.find("section").siblings('input').val(creatarry.join(';')+";"+imgContainer.parents("tr").find(".listtitle-up").html());//給隱藏域追加所有href值 if(srcval){alert("0"); var newvalue=imgContainer.find("section").siblings('input').val(creatarry.join(';')+";"+imgContainer.parents("tr").find(".listtitle-up").html()); alert("1"); imgContainer.find("section").siblings('input').val(newvalue); } // } setTimeout(function(){ $(".up-section").removeClass("loading"); $(".up-img").removeClass("up-opcity"); },450); numUp = imgContainer.find(".up-section").length; if(numUp >= 5){ // $(this).parent().hide(); } //input內容清空 // $(this).val(""); //限制字符個數 $(".up-span").each(function() { var maxwidth = 6; if ($(this).text().length > maxwidth) { $(this).text($(this).text().substring(0, maxwidth)); $(this).html($(this).html() + '...'); } }); $(this).hide(); console.log($(this).val()); $(this).parents('.z_file').append("<input type='file' name='file' id='newfile" + j + "' class='file' value='' accept='image/jpg,image/jpeg,image/png,image/bmp,image/PNG' multiple style='opacity: 0'/>"); j=j+1; console.log(j); }); $(".z_photo").delegate(".close-upimg","click",function(){ $(".works-mask").show(); delParent = $(this).parent(); imgsrcs=$(this).parents("section").siblings('input'); }); $(".wsdel-ok").click(function(){ $(".works-mask").hide(); var numUp = delParent.siblings().length; // var srcall=imgsrcs.val(); if(numUp < 6){ delParent.parent().find(".z_file").show(); } var srcinput=delParent.siblings('input');//聲明 被刪除的 行中的隱藏input var srcall=delParent.siblings('input').val();//聲明input的值 var srcallarry=srcall.split(';');//將input的val值轉為數組 var thissrc=delParent.find('a').attr('href'); //查找要刪除的圖片鏈接值 delParent.remove(); //移除 section 標簽域 // var nullarry=new Array();//聲明空 數組 for(var j=0;j<=srcallarry.length;j++){//循環 input中 的val值 ,除需要刪除的鏈接值 if(srcallarry[j]==thissrc){ srcallarry.splice(j,1); j=j-1; // nullarry.push(srcallarry[j]);//將除刪除連接的值存入空數組 } } srcinput.val(srcallarry.join(';'));//新數組的值 賦給input if(numUp==1){ srcinput.val(''); } }); $(".wsdel-no").click(function(){ $(".works-mask").hide(); }); function validateUp(files){ var arrFiles = [];//替換的文件數組 for(var i = 0, file; file = files[i]; i++){ //獲取文件上傳的后綴名 var newStr = file.name.split("").reverse().join(""); if(newStr.split(".")[0] != null){ var type = newStr.split(".")[0].split("").reverse().join(""); console.log(type+"===type==="); if(jQuery.inArray(type, defaults.fileType) > -1){ // 類型符合,可以上傳 if (file.size >= defaults.fileSize) { alert(file.size); alert('您這個"'+ file.name +'"文件大小過大'); } else { // 在這里需要判斷當前所有文件中 arrFiles.push(file); } }else{ alert('您這個"'+ file.name +'"上傳類型不符合'); } }else{ alert('您這個"'+ file.name +'"沒有類型, 無法識別'); } } return arrFiles; } })