TP5框架实现一次选择多张图片并预览的方法示例

时间：2022-09-23 21:03:38

本文实例讲述了TP5框架实现一次选择多张图片并预览的方法。分享给大家供大家参考，具体如下：

点击选择图片(可选多张)，确定后将选择的图片显示在页面上，已经选择的图片也可以删除，点击提交将图片提交给后台。

1、效果图

TP5框架实现一次选择多张图片并预览的方法示例

2、code

用input标签并选择type=file，记得带上multiple，不然就只能单选图片了

如果不想通过 ajax 提交，一定要加上文件传输协议 ( enctype="multipart/form-data" )

view

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>showImages</title> 
  6.   <style type="text/css"> 
  7.     .float{ 
  8.       float:left; 
  9.       width : 200px; 
  10.       height: 200px; 
  11.       overflow: hidden; 
  12.       border: 1px solid #CCCCCC; 
  13.       border-radius: 10px; 
  14.       padding: 5px; 
  15.       margin: 5px; 
  16.     } 
  17.     img{ 
  18.       position: relative; 
  19.     } 
  20.     .result{ 
  21.       width: 200px; 
  22.       height: 200px; 
  23.       text-align: center; 
  24.       box-sizing: border-box; 
  25.     } 
  26.     #file_input{ 
  27.       display: none; 
  28.     } 
  29.     .delete{ 
  30.       width: 200px; 
  31.       height:200px; 
  32.       position: absolute; 
  33.       text-align: center; 
  34.       line-height: 200px; 
  35.       z-index: 10; 
  36.       font-size: 30px; 
  37.       background-color: rgba(255,255,255,0.8); 
  38.       color: #777; 
  39.       opacity: 0; 
  40.       transition-duration: :0.7s; 
  41.       -webkit-transition-duration: 0.7s; 
  42.     } 
  43.     .delete:hover{ 
  44.       cursor: pointer; 
  45.       opacity: 1; 
  46.     } 
  47.   </style> 
  48.   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
  49.   <script type="text/javascript"> 
  50.     window.onload = function(){ 
  51.       var input = document.getElementById("file_input"); 
  52.       var result; 
  53.       var dataArr = []; // 储存所选图片的结果(文件名和base64数据) 
  54.       var fd; //FormData方式发送请求 
  55.       var oSelect = document.getElementById("select"); 
  56.       var oAdd = document.getElementById("add"); 
  57.       var oSubmit = document.getElementById("submit"); 
  58.       var oInput = document.getElementById("file_input"); 
  59.  
  60.       if(typeof FileReader==='undefined'){ 
  61.         alert("抱歉，你的浏览器不支持 FileReader"); 
  62.         input.setAttribute('disabled','disabled'); 
  63.       }else{ 
  64.         input.addEventListener('change',readFile,false); 
  65.       }　　　　　//handler 
  66.  
  67.       function readFile(){ 
  68.         fd = new FormData(); 
  69.         var iLen = this.files.length; 
  70.         var index = 0; 
  71.         for(var i=0;i<iLen;i++){ 
  72.           if (!input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)){　　//判断上传文件格式 
  73.             return alert("上传的图片格式不正确，请重新选择"); 
  74.           } 
  75.           var reader = new FileReader(); 
  76.           reader.index = i; 
  77.           fd.append(i,this.files[i]); 
  78.           reader.readAsDataURL(this.files[i]); //转成base64 
  79.           reader.fileName = this.files[i].name; 
  80.  
  81.           reader.onload = function(e){ 
  82.             var imgMsg = { 
  83.               name : this.fileName,//获取文件名 
  84.               base64 : this.result  //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里 
  85.             } 
  86.             dataArr.push(imgMsg); 
  87.             result = '<div class="delete">delete</div><div class="result"><img src="'+this.result+'" alt=""/></div>'; 
  88.             var div = document.createElement('div'); 
  89.             div.innerHTML = result; 
  90.             div['className'] = 'float'; 
  91.             div['index'] = index; 
  92.             document.getElementsByTagName('body')[0].appendChild(div); 　　//插入dom树 
  93.             var img = div.getElementsByTagName('img')[0]; 
  94.             img.onload = function(){ 
  95.               var nowHeight = ReSizePic(this); //设置图片大小 
  96.               this.parentNode.style.display = 'block'; 
  97.               var oParent = this.parentNode; 
  98.               if(nowHeight){ 
  99.                 oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px'; 
  100.               } 
  101.             } 
  102.  
  103.             div.onclick = function(){ 
  104.               this.remove();         // 在页面中删除该图片元素 
  105.               delete dataArr[this.index]; // 删除dataArr对应的数据 
  106.  
  107.             } 
  108.             index++; 
  109.           } 
  110.         } 
  111.       } 
  112.  
  113.       function send(){ 
  114.         var submitArr = []; 
  115.         for (var i = 0; i < dataArr.length; i++) { 
  116.           if (dataArr[i]) { 
  117.             submitArr.push(dataArr[i]); 
  118.           } 
  119.         } 
  120.         // console.log('提交的数据：'+JSON.stringify(submitArr)) 
  121.         $.ajax({ 
  122.           url : 'http://39.106.182.218', 
  123.           type : 'post', 
  124.           data : JSON.stringify(submitArr), 
  125.           dataType: 'json', 
  126.           //processData: false,  用FormData传fd时需有这两项 
  127.           //contentType: false, 
  128.           success : function(data){ 
  129.             console.log('返回的数据：'+JSON.stringify(data)) 
  130.           } 
  131.  
  132.         }) 
  133.       } 
  134.  
  135.       oSelect.οnclick=function(){ 
  136.         oInput.value = "";  // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发 
  137.         //清空已选图片 
  138.         $('.float').remove(); 
  139.         dataArr = []; 
  140.         index = 0; 
  141.         oInput.click(); 
  142.       } 
  143.  
  144.       oAdd.οnclick=function(){ 
  145.         oInput.value = "";  // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发 
  146.         oInput.click(); 
  147.       } 
  148.  
  149.       oSubmit.οnclick=function(){ 
  150.         if(!dataArr.length){ 
  151.           return alert('请先选择文件'); 
  152.         } 
  153.         send(); 
  154.       } 
  155.     } 
  156.     /* 
  157.      用ajax发送fd参数时要告诉jQuery不要去处理发送的数据， 
  158.      不要去设置Content-Type请求头才可以发送成功，否则会报“Illegal invocation”的错误， 
  159.      也就是非法调用，所以要加上“processData: false,contentType: false,” 
  160.      * */ 
  161.  
  162.     function ReSizePic(ThisPic) { 
  163.       var RePicWidth = 200; //这里修改为您想显示的宽度值 
  164.  
  165.       var TrueWidth = ThisPic.width; //图片实际宽度 
  166.       var TrueHeight = ThisPic.height; //图片实际高度 
  167.  
  168.       if(TrueWidth>TrueHeight){ 
  169.         //宽大于高 
  170.         var reWidth = RePicWidth; 
  171.         ThisPic.width = reWidth; 
  172.         //垂直居中 
  173.         var nowHeight = TrueHeight * (reWidth/TrueWidth); 
  174.         return nowHeight; //将图片修改后的高度返回，供垂直居中用 
  175.       }else{ 
  176.         //宽小于高 
  177.         var reHeight = RePicWidth; 
  178.         ThisPic.height = reHeight; 
  179.       } 
  180.     } 
  181.   </script> 
  182. </head> 
  183. <body> 
  184. <div class="container"> 
  185.   <label>请选择一个图像文件：</label> 
  186.   <button id="select">(重新)选择图片</button> 
  187.   <button id="add">(追加)图片</button> 
  188.  
  189. <form action="" method="post" enctype="multipart/form-data"> 
  190.   <input type="file" id="file_input" name="image[]" multiple/> 
  191.   <!--用input标签并选择type=file，记得带上multiple，不然就只能单选图片了--> 
  192.   <button id="submit">提交</button> 
  193. </form> 
  194.  
  195. </div> 
  196. </body> 
  197. </html> 

controller

?
1
2
$image=request()->file('image');
print_r($image);

3、over！！！

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

原文链接：https://blog.csdn.net/weixin_42068782/article/details/84139230

标签：

相关文章