TP5之一次选择多张图片并预览

当前代码功能有一些缺陷，可以关注最新的博客进行查看（https://www.cnblogs.com/ovim/p/12442054.html），如果您有兴趣，可以自己研究研究，欢迎沟通交流

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

1、效果图

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 
114             function send(){
115                 var submitArr = [];
116                 for (var i = 0; i < dataArr.length; i++) {
117                     if (dataArr[i]) {
118                         submitArr.push(dataArr[i]);
119                     }
120                 }
121                 // console.log('提交的数据：'+JSON.stringify(submitArr))
122                 $.ajax({
123                     url : 'http://39.106.182.218',
124                     type : 'post',
125                     data : JSON.stringify(submitArr),
126                     dataType: 'json',
127                     //processData: false,   用FormData传fd时需有这两项
128                     //contentType: false,
129                     success : function(data){
130                         console.log('返回的数据：'+JSON.stringify(data))
131                     }
132 
133                 })
134             }
135             
136             oSelect.onclick=function(){
137                 oInput.value = "";   // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发
138                 //清空已选图片
139                 $('.float').remove();
140                 dataArr = [];
141                 index = 0;
142                 oInput.click();
143             }
144             
145             oAdd.onclick=function(){
146                 oInput.value = "";   // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发
147                 oInput.click();
148             }
149 
150 
151             oSubmit.onclick=function(){
152                 if(!dataArr.length){
153                     return alert('请先选择文件');
154                 }
155                 send();
156             }
157         }
158         /*
159          用ajax发送fd参数时要告诉jQuery不要去处理发送的数据，
160          不要去设置Content-Type请求头才可以发送成功，否则会报“Illegal invocation”的错误，
161          也就是非法调用，所以要加上“processData: false,contentType: false,”
162          * */
163 
164 
165         function ReSizePic(ThisPic) {
166             var RePicWidth = 200; //这里修改为您想显示的宽度值
167 
168             var TrueWidth = ThisPic.width; //图片实际宽度
169             var TrueHeight = ThisPic.height; //图片实际高度
170 
171             if(TrueWidth>TrueHeight){
172                 //宽大于高
173                 var reWidth = RePicWidth;
174                 ThisPic.width = reWidth;
175                 //垂直居中
176                 var nowHeight = TrueHeight * (reWidth/TrueWidth);
177                 return nowHeight;  //将图片修改后的高度返回，供垂直居中用
178             }else{
179                 //宽小于高
180                 var reHeight = RePicWidth;
181                 ThisPic.height = reHeight;
182             }
183         }
184     </script>
185 </head>
186 <body>
187 <div class="container">
188     <label>请选择一个图像文件：</label>
189     <button id="select">(重新)选择图片</button>
190     <button id="add">(追加)图片</button>
191 
192 <form action="" method="post" enctype="multipart/form-data">
193     <input type="file" id="file_input" name="image[]" multiple/> 
194     <!--用input标签并选择type=file，记得带上multiple，不然就只能单选图片了-->
195     <button id="submit">提交</button>
196 </form>
197 
198 </div>
199 </body>
200 </html>

controller

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

over！over！over！

posted @ 2019-03-22 18:37 为牧阅读(1439) 评论(0) 编辑收藏举报

刷新页面返回顶部

为牧

code change the world！！！

TP5之一次选择多张图片并预览

1、效果图

2、code

over！over！over！

公告