話不多說，直接放代碼。
前端頁面：
<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,後續等待改進。