製作拖拽上傳
A. 拖拽上傳和dataTransfer對象操作
場景： 有一個文件上傳div區域，要在這個區域實現文件拖拽到此處可以讀取文件。
參考：https://blog.csdn.net/qq_43523725/article/details/115162416
https://blog.csdn.net/hjc256/article/details/89021483
被拖拽元素 和 目標元素 的事件：
被拖拽元素：drag-在拖拽的過程中觸發
dragend-拖拽完成時
目標元素 ：dragenter- 拖放元素進入目標元素時
dragover - 拖放元素在目標元素上時
dragleave - 拖放元素在目標元素上離開
drop- 被拖放的元素在目標元素上同時滑鼠放開觸發的事件(註：需要阻止dragover的默認行為才會觸發drop事件)
let dropBox = this.$refs.dragArea;
dropBox.addEventListener("dragenter", onDrag, false)
dropBox.addEventListener("dragover", onDrag, false)
dropBox.addEventListener("drop", onDrop, false)
function onDrag(e){
e.preventDefault();
e.stopPropagation();
}
onDrop(e){
e.stopPropagation();
e.preventDefault();
let dt = e.dataTransfer;
let selectedFile = dt.files[0];
}
dataTransfer對象
在所有的拖放事件中都提供了一個數據傳輸對象dataTransfer，主要是用於在源對象和目標對象之間傳遞數據。
1、setData(format, data)
設置拖拽事件中要傳遞的數據，format的參數為數據類型
該方法向dataTransfer中對象中存入數據，接受兩個參數，第一個表示要存入的數據類型，共有4種：text/plain、text/html、text/xml、text/uri-list
第二個參數為要存入的數據，例如：event.dataTransfer.setData('text/plain', 'hello world')
2、getData(format)
獲得拖拽事件中傳遞的數據，format參數為數據類型
該方法從dataTransfer對象中讀取數據，參數為在setData方法中指定的數據類型，例如：event.dataTransfer.getData('text/plain')
3、clearData()
該方法清空dataTransfer對象中存儲的數據，參數可選，為數據類型。若為空，則清空所有數據。
3、setDragImage(element,x,y)
該方法通過img元素來設置拖放圖標
element表示拖拽時滑鼠下面的圖片（通常是image元素，也可以說canvas元素）
x、y分別指示相對於圖片的橫向和縱向偏移量，相對應滑鼠指針。
3、files屬性
返回被拖拽的文件列表，是一個FileList對象，有length屬性，可通過下標訪問。
file對象的例子：
B. WEB頁面如何實現拖拽文件夾上傳
目前用戶要通過Web上傳一個文件是通過 <input type="file /"> 這個標記。具體過程需要在一個很傻的對話框里定位文件夾 -> 在大量的文件里找到目標文件 -> 確定 -> 點「上傳」按鈕。我們能不能把這個步驟簡化，實現拖拽上傳呢？
比如說，
1. 在 資源管理器 里選擇一個圖片
2. 拖拽到一個網頁，比如說一個正在編輯的博客
3. 後台AJXJ自動上傳這個圖片
4. 在正在編輯的博客的當前位置直接插入並顯示圖片。
我想用javascript實現。（跟AJAX一樣，有一點hack的味道。）
原理很簡單。首先用戶拖拽一個圖片到瀏覽器，瀏覽器會自動跳轉到這個圖片。比如說我拖拽 D:\test\1.jpg 到瀏覽器，瀏覽器會跳轉當前頁面到 file:///D:/test/1.jpg。那麼我們要做的就是在瀏覽器跳轉之前：
1. 截獲body.onunload事件，並取消瀏覽器的跳轉
2. 獲知瀏覽器將要跳轉到的頁面
3. 自動填寫 <input type="file" />的地址
4. AJAX後台上傳圖片
5. 把圖片插入當前的正在編輯位置。
發這個帖子的目的，想跟大家探討這個設想的可能性。最後希望得出一個結論：可行，還是不可行。如果可行的話我希望深入探討出一個固定的模式。（像AJAX那樣）
C. 請問什麼是拖拽上傳
拖拽上傳就是打開所需上傳文件所在文件夾以及360雲盤頁面，然後用滑鼠左鍵選擇文件不鬆手拖拽至360雲盤頁面就可以上傳了，這個只是不用一步步去找文件，也沒有什麼特別的便利
D. 文件拖拽上傳怎麼用
一般需要按照提示安裝相應的插件，安裝成功後按照提示將你需要上傳的文件拖動到相應的窗口區域，松開滑鼠即可上傳。
E. 怎樣用html5實現拖拽上傳文件
，首先要判斷拖入的文件是否符合要求，包括圖片類型、大小等，然後獲取本地圖片信息，實現預覽，最後上傳。
$(function(){
...接上部分
var box = document.getElementById('drop_area'); //拖拽區域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默認瀏覽器拖拽效果
var fileList = e.dataTransfer.files; //獲取文件對象
//檢測是否是拖拽文件到頁面的操作
if(fileList.length == 0){
return false;
}
//檢測文件是不是圖片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是圖片！");
return false;
}
//拖拉圖片到瀏覽器，可以實現預覽功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //圖片名稱
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize>500){
alert("上傳大小不能超過500K.");
return false;
}
var str = "<img src='"+img+"'><p>圖片名稱："+filename+"</p><p>大小："+filesize+"KB</p>";
$("#preview").html(str);
//上傳
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('mypic', fileList[0]);
xhr.send(fd);
},false);
});
F. 用js怎麼實現簡單拖拽文件上傳
拖拽還是挺不錯的一個頁面效果，我個人認為，其生命力在於可以讓用戶自己做一些操作，所謂自定義。例如：
①瀏覽器標簽順序的拖拽切換
現在基本上所有的選項卡式的瀏覽器都有順序拖拽切換的功能，如下圖：
類似的效果我們可以在QQ精要新聞彈出框中看到，見下圖：
②把內容放在自己喜歡的位置上
這個在桌面軟體上見到的最多，比如視頻播放器，Adobe系列軟體(CS3+)等。
G. 文件拖拽上傳怎麼用
如果你注冊了「網路雲」打開的情況下，在桌面就可以拖拽上傳了，直接把想上傳的東西拖到圖標上即可