首页>>表单>>移动端多图片预览并上传包含php上传完整代码(2020-08-25)

移动端多图片预览并上传包含php上传完整代码

移动端多图片上传并本地预览删除，PC端也适用

移动端多图片预览并上传包含php上传完整代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="inner">  
  2.   
  3.     <div class="problem">  
  4.         <div class="custom_img">  
  5.             <div class="custom_img_top">  
  6.                 <p>文件限制大小10MB</p>  
  7.                 <p><span class="upload_img_length">0</span>/3</p>  
  8.             </div>  
  9.               
  10.             <!--点击上传图片 触发下面的div 点击事件-->  
  11.             <div class="upload_img_wrap">  
  12.                 <div id="imgBox"></div>  
  13.                 <img class="upload_img" data-id="1" src="img/upload_img.png" />  
  14.                 <img style="display:none" class="upload_img" data-id="2" src="img/upload_img.png" />  
  15.                 <img style="display:none" class="upload_img" data-id="3" src="img/upload_img.png" />  
  16.             </div>  
  17.             <div style="width: 100%;height: 100vh;position: relative;">  
  18.                 <form id="upBox" class="upload_form" action="upload_batch.php" method="post" enctype="multipart/form-data">  
  19.                     <div id="inputBox" style="display:none;">  
  20.                         <input type="file" name="file[]" data-id="1" title="Choose file" id="file1"  />  
  21.                         <input type="file" name="file[]" data-id="2" title="Choose file" id="file2"  />  
  22.                         <input type="file" name="file[]" data-id="3" title="Choose file" id="file3"  /> Click to Choose file  
  23.                     </div>  
  24.                       
  25.                     <input type="submit" name="button" id="button" value="Upload File"  class="button_upload"/>   
  26.                 </form>  
  27.             </div>  
  28.         </div>  
  29.     </div>  
  30. </div>  

 

JavaScript Code
  1. <script>    
  2.         
  3.     var imgNum = 0;    
  4.     $(".upload_img_wrap .upload_img").bind("click", function(ev) {    
  5.         //console.log(ev.currentTarget.dataset.id)    
  6.         var index = ev.currentTarget.dataset.id;    
  7.         var that = this;    
  8.         if(index == 1) {    
  9.             $("#file1").click();    
  10.             $("#file1").unbind().change(function(e) {    
  11.                 var index = e.currentTarget.dataset.id;    
  12.                 if($('#file').val() == '') {    
  13.                     return false;    
  14.                 }    
  15.                 $(that).hide();    
  16.                 var filePath = $(this).val();    
  17.                 changeImg(e, filePath, index);    
  18.                     
  19.                 imgNum++;    
  20.                 if(imgNum<3){    
  21.                     $(".upload_img").eq(1).show();    
  22.                 }    
  23.                 $(".upload_img_length").html(imgNum);    
  24.             })    
  25.         } else if(index == 2) {    
  26.             $("#file2").click();    
  27.             $("#file2").unbind().change(function(e) {    
  28.                 var index = e.currentTarget.dataset.id;    
  29.                 if($('#file').val() == '') {    
  30.                     return false;    
  31.                 }    
  32.                 $(that).hide();    
  33.                 var filePath = $(this).val();    
  34.                 changeImg(e, filePath, index);    
  35.                     
  36.                 imgNum++;    
  37.                 if(imgNum<3){    
  38.                     $(".upload_img").eq(2).show();    
  39.                 }    
  40.                 $(".upload_img_length").html(imgNum);    
  41.             })    
  42.         } else if(index == 3) {    
  43.             $("#file3").click();    
  44.             $("#file3").unbind().change(function(e) {    
  45.                 var index = e.currentTarget.dataset.id;    
  46.                 if($('#file').val() == '') {    
  47.                     return false;    
  48.                 }    
  49.                 var filePath = $(this).val();    
  50.                 changeImg(e, filePath, index);    
  51.                 $(that).hide();    
  52.                 imgNum++;    
  53.                 $(".upload_img_length").html(imgNum);    
  54.             })    
  55.         }    
  56.     })    
  57.     
  58.     function changeImg(e, filePath, index) {    
  59.         fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();    
  60.         //检查后缀名    
  61.         if(!fileFormat.match(/.png|.jpg|.jpeg|.mp4|.mov/)) {    
  62.             showError('文件格式必须为：png/jpg/jpeg');    
  63.             return;    
  64.         }    
  65.         //获取并记录图片的base64编码    
  66.         var reader = new FileReader();    
  67.         reader.readAsDataURL(e.target.files[0]);    
  68.         //alert(filePath.lastIndexOf("."));    
  69.         reader.onloadend = function() {    
  70.             // 图片的 base64 格式, 可以直接当成 img 的 src 属性值            
  71.             var dataURL = reader.result;    
  72.             // console.log(dataURL)    
  73.             // 显示图片    
  74.                 
  75.             if(fileFormat.indexOf(".jpg") !== -1 || fileFormat.indexOf(".png")!== -1  || fileFormat.indexOf(".jpeg")!== -1 ){    
  76.             $("#imgBox").html($("#imgBox").html() + '<div class="imgContainer" data-index=' + index + '><img   src=' + dataURL + ' onclick="imgDisplay(this)"><img onclick="removeImg(this,' + index + ')"  class="imgDelete" src="img/del_img.png" /></div>');    
  77.             }    
  78.             else    
  79.             {    
  80.             $("#imgBox").html($("#imgBox").html() + '<div class="imgContainer" data-index=' + index + '><img   src=images/video.jpg ><img onclick="removeImg(this,' + index + ')"  class="imgDelete" src="img/del_img.png" /></div>');      
  81.             }    
  82.         };    
  83.     
  84.     }    
  85.     
  86.     function removeImg(obj, index) {    
  87.         for(var i = 0; i < $(".imgContainer").length; i++) {    
  88.             if($(".imgContainer").eq(i).attr("data-index") == index) {    
  89.                 $(".imgContainer").eq(i).remove();    
  90.             }    
  91.         }    
  92.         for(var i = 0; i < $(".upload_img").length; i++) {    
  93.             $(".upload_img").eq(i).hide();    
  94.             if($(".upload_img").eq(i).attr("data-id") == index) {    
  95.                 console.log($(".upload_img").eq(i).attr("data-id"))    
  96.                 $(".upload_img").eq(i).show();    
  97.             }    
  98.         }    
  99.         imgNum--;    
  100.         $(".upload_img_length").html(imgNum);    
  101.     }    
  102.         
  103.         
  104.     function imgDisplay(obj) {    
  105.         var src = $(obj).attr("src");    
  106.         var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;display: flex;justify-content: center;    align-items: center;"><img src=' + src + ' style="margin-top: 100px;width: 96%;margin-bottom: 100px;"><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" onclick="closePicture(this)">×</p></div>'    
  107.         $('body').append(imgHtml);    
  108.     }    
  109.         
  110.     function closePicture(obj) {    
  111.         $(obj).parent("div").remove();    
  112.     }    
  113. </script>    

 


原文地址:http://www.freejs.net/article_biaodan_882.html