本文实例讲述了tp5框架实现一次选择多张图片并预览的方法。分享给大家供大家参考，具体如下：
点击选择图片(可选多张)，确定后将选择的图片显示在页面上，已经选择的图片也可以删除，点击提交将图片提交给后台。
1、效果图
2、code
用input标签并选择type=file，记得带上multiple，不然就只能单选图片了
如果不想通过 ajax 提交，一定要加上文件传输协议 ( enctype=”multipart/form-data” )
view
<!doctype html><html><head> <meta chart="utf-8"> <title>showimages</title> <style type="text/css"> .float{ float:left; width : 200px; height: 200px; overflow: hidden; border: 1px solid #cccccc; border-radius: 10px; padding: 5px; margin: 5px; } img{ position: relative; } .result{ width: 200px; height: 200px; text-align: center; box-sizing: border-box; } #file_input{ display: none; } .delete{ width: 200px; height:200px; position: absolute; text-align: center; line-height: 200px; z-index: 10; font-size: 30px; background-color: rgba(255,255,255,0.8); color: #777; opacity: 0; transition-duration: :0.7s; -webkit-transition-duration: 0.7s; } .delete:hover{ cursor: pointer; opacity: 1; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> window.onload = function(){ var input = documen励志座右铭t.getelementbyid("file_input"); var result; var dataarr = []; // 储存所选图片的结果(文件名和ba64数据) var fd; //f提问的技巧ormdata方式发送请求 var olect = document.getelementbyid("lect"); var oadd = document.getelementbyid("add"); var osubmit = document.getelementbyid("submit"); var oinput = document.getelementbyid("file_input"); if(typeof filereader==='undefined'){ alert("抱歉，你的浏览器不支持 filereader"); input.tattribute('disabled','disabled'); }el{ input.addeventlistener('change',readfile,fal); } //handler function readfile(){ fd = new formdata(); var ilen = this.files.length; var index = 0; for(var i=0;i<ilen;i++){ if (!input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)){ //判断上传文件格式 return alert("上传的图片格式不正确，请重新选择"); } var reader = new filereader(); reader.index = i; fd.append(i,this.files[i]); reader.readasdataurl(this.files[i]); //转成ba64 reader.filename = this.files[i].name; reader.onload = function(e){ var imgmsg = { name : this.filename,//获取文件名 ba64 : this.result //reader.readasdataurl方法执行完后，ba64数据储存在reader.result里 } dataarr.push(imgmsg); result = '<div class="delete">delete</div><div class="result"><img src="'+this.result+'" alt=""/></div>'; var div = document.createelement('div'); div.innerhtml = result; div['classname'] = 'float'; div['index'] = index; document.getelementsbytagname('body')[0].appendchild(div); //插入dom树 var img = div.getelementsbytagname('img')[0]; 湖北工业大学就业 img.onload = function(){ var nowheight = resizepic(this); //设置图片大小 this.parentnode.s正襟危坐的意思tyle.display = 'block'; var oparent = this.parentnode; if(nowheight){ oparent.style.paddingtop = (oparent.offtheight - nowheight)/2 + 'px'; } } div.onclick = function(){ this.remove(); // 在页面中删除该图片元素 delete dataarr[this.index]; // 删除dataarr对应的数据 } index++; } } } function nd(){ var submitarr = []; for (var i = 0; i < dataarr.length; i++) { if (dataarr[i]) { submitarr.push(dataarr[i]); } } // console.log('提交的数据：'+json.stringify(submitarr)) $.ajax({ url : 'http://39.106.182.218', type : 'post', data : json.stringify(submitarr), datatype: 'json', //processdata: fal, 用formdata传fd时需有这两项 //contenttype: fal, success : function(data){ console.log('返回的数据：'+json.stringify(data)) } }) } olect.οnclick=function(){ oinput.value = ""; // 先将oinput值清空，否则选择图片与上次相同时change事件不会触发 //清空已选图片 $('.float').remove(); dataarr = []; index = 0; oinput.click(); } oadd.οnclick=function(){ oinput.value = ""; // 先将oinput值清空，否则选择图片与上次相同时change事件不会触发 oinput.click(); } osubmit.οnclick=function(){ if(!dataarr.length){ return alert('请先选择文件'); } nd(); } } /* 用ajax发送fd参数时要告诉jquery不要去处理发送的数据， 不要去设置content-type请求头才可以发送成功，否则会报“illegal invocation”的错误， 也就是非法调用，所以要加上“processdata: fal,contenttype: fal,” * */ function resizepic(thispic) { var repicwidth = 200; //这里修改为您想显示的宽度值 var truewidth = thispic.width; //图片实际宽度 var trueheight = thispic.height; //图片实际高度 if(truewidth>trueheight){ //宽大于高 var rewidth = repicwidth; thispic.width = rewidth; //垂直居中 var nowheight = trueheight * (rewidth/truewidth); return nowheight; //将图片修改后的高度返回，供垂直居中用 }el{描写人物的作文600字 //宽小于高 var reheight = repicwidth; thispic.height = reheight; } } </script></head><body><div class="container"> <label>请选择一个图像文件：</label> <button id="lect">(重新)选择图片</button> <button id="add">(追加)图片</button><form action="" method="post" enctype="multipart/form-data"> <input type="file" id="file_input" name="image[]" multiple/> <!--用input标签并选择type=file，记得带上multiple，不然就只能单选图片了--> <button id="submit">提交</button></form></div></body></html>controller
$image=request()->file('image');print_r($image);3、over！！！
本文发布于:2023-04-08 19:30:38，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/b7560a031c7815a5df3edce18eda0c01.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：TP5框架实现一次选择多张图片并预览的方法示例.doc
本文 PDF 下载地址：TP5框架实现一次选择多张图片并预览的方法示例.pdf
| 留言与评论（共有 0 条评论） |
