整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
紹
DropzoneJS是一個提供文件拖拽上傳并且提供圖片預覽的開源類庫, 零依賴且高度可定制
官網和Github
官方文檔：https://www.dropzonejs.com/
中文版本：http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/#installation
Github: https://github.com/enyo/dropzone/
下載和安裝
https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js
引入到我們的頁面
<script src="./path/to/dropzone.js"></script>這是官網Demo的效果, 如果你也想用到這樣的效果, 可以直接到源碼包的dist文件夾下樣式拷貝過來。
Dropzone 不會處理你上傳到服務器上面的文件. 你必須自己編寫代碼實現接收和保存上傳的文件。
如何使用?
我們只需要創建一個class類名是dropzone的form表單元素：
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>Dropzone將查找所有的 class 屬性中包含 dropzone 的表單元素, 就是這么簡單, 這些上傳文件將被正常處理就像這里是一段像下面這樣的HTML代碼:
<input type="file" name="file" />程序化方式創建 dropzones
不是必須在form上, 你也可以通過js代碼初始化一個dropzone實例
// Dropzone class:
var myDropzone=new Dropzone("div#myId", { url: "/file/post"});或者假如你用到了jquery也可以這樣寫
// jQuery
$("div#myId").dropzone({ url: "/file/post" });配置
有兩種方式配置 dropzones.
一種就是和之前創建表單一樣
另一種是通過js代碼實現, 如下
lt;!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>H5混合開發(runoob.com)</title>
<style type="text/css">
#div1{width:350px;height:70px;padding:10px;border:1pxsolid#aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖動 RUNOOB.COM 圖片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img/logo.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
它看上去也許有些復雜，不過我們可以分別研究拖放事件的不同部分。
設置元素為可拖放
首先，為了使元素可拖動，把 draggable 屬性設置為 true ：
<img draggable="true">
拖動什么 - ondragstart 和 setData()
然后，規定當元素被拖動時，會發生什么。
在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。
dataTransfer.setData() 方法設置被拖數據的數據類型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。
放到何處 - ondragover
ondragover 事件規定在何處放置被拖動的數據。
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
這要通過調用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
進行放置 - ondrop
當放置被拖數據時，會發生 drop 事件。
在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代碼解釋：
調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。
被拖數據是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標元素）中
現目標：
圖1 多圖上傳效果
1、html代碼
<tr class=''>
<td width="90" align="right">相關多圖</td>
<td >
<div class='yllist yllist_x_duotu'>
<dl>
<!--存放上傳的圖片-->
<transition-group name="list">
<dd v-for="(item,index) in listData " draggable="true" :key="item"
@click="del(index)"
@mouseover="showzz(1,index)"
@mouseleave="showzz(0,index)"
@dragstart="drag($event,index)"
@drop="drop($event,index)"
@dragover='allowDrop($event)'
>
<img :src="item.picpath">
<div class='zzz none' :class="{'nonone':item.shs==1}">
<div class='zzimg '><i class="fa fa-trash-o" aria-hidden="true"></i></div>
</div>
</dd>
<!--結束-->
</transition-group>
<dd @click="upbtn" class='btnclass'><i class="fa fa-camera-retro" aria-hidden="true"></i>
<input type='file' id='multiple' accept="image/*" multiple="multiple" style='display:none' @change="autoup" name="ss">
</dd>
</dl>
<div class='clear'></div>
<div>
<span class='itemms'>說明：可以拖動改變順序</span>
</div>
</div>
</td>
</tr>說明：
@click="del(index)" 點擊刪除圖片 index為數組的索引 點擊的是第幾個圖片
@mouseover="showzz(1,index)" 鼠標放到上邊 出現遮罩層 垃圾桶
@mouseleave="showzz(0,index)" 鼠標離開 遮罩層消失
@dragstart="drag($event,index)" 以下三個 用于拖拽排序
@drop="drop($event,index)"
@dragover='allowDrop($event)'
draggable="true" 設置為true 可以拖動
:key="item" 這里的key 要注意不能等于 index，要不然沒有動畫效果
img src的屬性 是 :src="item.picpath" 不能是src={{item.picpath}}
<div class='zzz none' :class="{'nonone':item.shs==1}"> 設置遮罩層 shs=1的時候顯示
上傳的選擇框設置為display:none隱藏
transition-group用法：
<transition-group name="list"> 實現拖拽的動畫效果 后邊的name可以隨意寫 ，但是要和css的.list-move {transition: transform 0.3s;} 【上邊自定義的name，我這里是list】-move 設置該css 動畫的時間
2、js代碼
new Vue({
el: '#app',
data(){
tagslist:[
'網站開發',//存放的標簽
'網站建設'
],
tagsdt:"", //綁定的標簽文本框
tagindex:"",//刪除標簽的序號（索引）
listData: [
/*
{'picpath':'/public/upload/image/20211107/1.jpg',shs:0}
shs 顯示遮罩層 ，垃圾桶刪除標志，0 不顯示 1顯示
*/
],
file:"file", //用于切換 file text 實現同一個圖片可以連續上傳
tis:'', //提示內容
showzzc:0, //彈出框的顯示，隱藏 。0 隱藏 1顯示
showts:0, //1 彈出提示操作框 2 彈出提示確認框
lisindex:"", //記錄圖片的索引
datameth:"" //根據這里的參數操作不同的方法
}
},
methods:{
tags:function(){
if(this.tagsdt){
this.tagslist.push(this.tagsdt);
}
this.tagsdt="";
},
deltag:function(f){
this.showzzc=1;
this.showts=1;
this.tagindex=f;
this.datameth='tag';
},
hidetc:function(){
this.showzzc=0;
},
del:function(key){
this.showzzc=1;
this.showts=1;
this.lisindex=key;
this.datameth="delpic";
//this.listData.splice(key, 1);
},
isdelc:function(){
if(this.datameth=="delpic"){
this.listData.splice(this.lisindex, 1);
}
if(this.datameth=="tag"){
this.tagslist.splice(this.tagindex, 1);
}
this.showzzc=0;
},
showzz:function(meth,key){
//console.log(this.listData[key].shs);
if(!this.listData[key].shs){
this.$set(this.listData[key],'shs',0);
}
this.listData[key].shs=meth;
},
upbtn:function(){
document.getElementById("multiple").click();
},
autoup:function(){
let that=this;
that.file="text"; //切換text file
let ups=document.getElementById( "multiple");
let formdata=new FormData();
if(ups.files[0]){
if(ups.files.length>4){
this.showzzc=1;
this.showts=2;
this.tis="一次最多可以選擇4張圖片上傳！";
that.file="file";
return false;
}
for(m=0;m<=ups.files.length-1;m++){
formdata.append("file", ups.files[m]);
axios.post("/api/uppic", formdata)
.then(function (response) {
if(response.data.error=='0000'){
that.listData.push(response.data.pic);
that.file="file";//重新切換為file
//console.log(JSON.stringify(that.listData));
}else{
that.showzzc=1;
that.showts=2;
that.tis=response.data.msg;
that.file="file";
return false;
}
})
.catch(function (error) {
console.log(error);
});
}
console.log(ups.outerHTML);
}
}
})注意：上傳圖片以后一定要that.file="file"，切換回file，不然會出現只能上傳一次，下次選擇當前圖片不能上傳的情況。
上邊的上傳是選取多個然后for循環逐個上傳的，也可以file使用數組file[]批量提交，如下：
for(m=0;m<=ups.files.length-1;m++){
formdata.append("file[]", ups.files[m]);
}
axios.post("/api/uppic", formdata)但是這樣做的話，后臺使用
foreach($_FILES as $k=>$v){
}得到的$v['name']就是數組，需要我們再次for循環，得到單個的圖片信息，返回以后的信息因為是數組，push只能一次追加一個，就只能再次循環，感覺很麻煩還不如開始就循環，一個一個的上傳。
3、信息標簽html
<tr class=''>
<td width="90" align="right">信息標簽</td>
<td>
<div class="layui-input-inline tagslist" >
<span class='tagspan' v-for="(tag,key) in tagslist" :key="key" @click="deltag(key)">{{tag}}</span>
</div>
<input type="text" class='inpMain' id='tags' style='width:150px;' @blur="tags" v-model="tagsdt" /> <span class='itemms'>點擊標簽可以刪除</span>
<span class='itemms'></span>
</td>
</tr>輸入文本框綁定tagsdt，當我們鼠標離開該文本框的時候，通過blur使用tags方法讀取綁定的tagsdt，可以獲得輸入的內容，這里需要判斷是否為空，如果不為空再push進數組：this.tagslist.push(this.tagsdt);
4、php后端代碼
foreach($_FILES as $k=>$v){
$v['name'],$v['size'],$v['tem_name']
就是圖片的基本信息，使用move_uploaded_file移動到指定文件夾
$imags['picpath']=$path;
$imags['shs']=0;
}
exit(json_encode(array('error'=>'0000','pic'=>$imags),JSON_UNESCAPED_UNICODE));move_uploaded_file用法：
當前文件：$v["tmp_name"]，
目標文件：ROOT_PATH.$images_dir.$newname
move_uploaded_file($v["tmp_name"], ROOT_PATH.$images_dir.$newname);
再次強調上傳圖片，要驗證圖片的安全性，防止圖片木馬！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
