当前代码功能有一些缺陷，可以关注最新的博客进行查看（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);