话不多说，直接放代码。
前端页面：
<h1 align="center">这是标题</h1> <h2 style="color:red;margin-left:200px;"><b>拖拽图片上传</b></h2> <div id="imgs" draggable="true" style="width:1000px;margin:0 auto;height:400px;border:1px solid red;"></div> <button type="button" id="btns" style="margin-left:300px;margin-top:30px;">上传图片</button> <input type="hidden" name="car_id" gid="{$id}" id="car_id" value="{$id}" /> <script type="text/javascript"> var oDragWrap = $("#imgs")[0]; //拖进 oDragWrap.addEventListener('dragenter', function(e) { e.preventDefault(); }, false); //拖离 oDragWrap.addEventListener('dragleave', function(e) { dragleaveHandler(e); }, false); //拖来拖去 , 一定要注意dragover事件一定要清除默认事件 //不然会无法触发后面的drop事件 oDragWrap.addEventListener('dragover', function(e) { e.preventDefault(); }, false); //扔 oDragWrap.addEventListener('drop', function(e) { dropHandler(e); }, false); //提交的整个formData的个数 var allfileList = []; var total = new FormData(oDragWrap);var dropHandler = function(e) {
//将本地图片拖拽到页面中后要进行的处理都在这 e.preventDefault(); var fileList = e.dataTransfer.files; //获取文件列表 // console.log(fileList); var img = document.createElement('img'); //检测是否是拖拽文件到页面的操作 // console.log(fileList.length); if ( fileList.length == 0 ) { alert( '未得到图片信息' ); return false; } //得到所有的图片张数 for ( var i = 0 ; i < fileList.length ; i++ ) { if (fileList[i].type.indexOf('image') === -1) {alert('上传类型不是图片');return false;} if (window.URL.createObjectURL) { img.src = window.URL.createObjectURL(fileList[i]); //FF4+ } else if (window.webkitURL.createObjectURL) { img.src = window.webkitURL.createObjectURL(fileList[i]);//Chrome8+ } else { var reader = new FileReader();//实例化file reader对象 reader.onload = function(e) { img.src = this.result; // oDragWrap.appendChild(img); } reader.readAsDataURL(fileList[i]); } var str = '<img src='+img.src+' style="margin-left:10px;margin-top:10px;;width:150px;height:120px;" alt='+fileList[i].name+' />'; $("#imgs").append(str); allfileList.push(fileList[i]);//将所有的图片对象放入到formdata中
total.append("img[]",allfileList[i]); } // console.log(fileList); // console.log(allfileList); // console.log(total); }$("#btns").click(function(){
total.append("car_id",$("#car_id").attr("gid")); $.ajax({ type:'post', dataType:'json', data:total, url: "{:url('admin/wechat/do_add_carpic')}", processData: false, contentType: false, success:function(res){ if(res.code == 0){ alert(res.msg); }else if(res.code == 1){ alert(res.msg); window.location.href="{:url('admin/wechat/car_base_info')}"; }else if(res.code == 2){ alert(res.msg); }else if(res.code == 3){ alert(res.msg); }else{ alert(res.msg); } } }); }) </script>页面效果如下：
后端处理代码：
public function do_add_carpic()
{ $car_id = input("car_id"); $files = request()->file('img'); if($files){ foreach($files as $file){ // 移动到框架应用根目录/public/static/uploads/ 目录下 $info = $file->validate(['size'=>3000000,'ext'=>'jpeg,jpg,png,gif'])->rule('date')->move(ROOT_PATH . 'public' . DS .'static'. DS .'uploads',true,false); if($info){ $res[] = json_encode($info->getSaveName()); }else{ echo json_encode(['code'=>3,'msg'=>$file->getError()]); } } if(count($res) > 4){ echo json_encode(['code'=>4,'msg'=>'最多上传4张图片']); }else{ $imgstr['img'] = str_replace('"','', implode(';',$res)); $imgstr['car_id'] = $car_id; $carimgs = Db::name("wxcar_img")->insert($imgstr); if($carimgs){ echo json_encode(['code'=>1,'msg'=>'上传成功']); }else{ echo json_encode(['code'=>2,'msg'=>'上传失败,请尽量一次性选中全部图片上传']); } } }else{ echo json_encode(['code'=>0,'msg'=>'图片不可为空']); } }至此，我自己写的图片上传就完成了额，
需要注意的是：当图片拖拽进入框内的时候，需要等待一两秒，等待图片全部append进入到同一个数组里面的时候，才能一次性全部提交成功，否则会出现图片重复，这算是一个小bug,后续等待改进。