拖拽獲取文件

$(document).on({
                dragleave: function(e) { //拖離
                    e.stopPropagation();//不再派發事件。
                    e.preventDefault();//通知瀏覽器不要執行與事件關聯的默認動作。
                },
                dragenter: function(e) { //拖進
                    e.stopPropagation();//不再派發事件。
                    e.preventDefault();//通知瀏覽器不要執行與事件關聯的默認動作。
                },
                dragover: function(e) { //拖來拖去
                    e.stopPropagation();//不再派發事件。
                    e.preventDefault();//通知瀏覽器不要執行與事件關聯的默認動作。
                },
                drop: function(e) { //拖後放
                    e.stopPropagation();//不再派發事件。
                    e.preventDefault();//通知瀏覽器不要執行與事件關聯的默認動作。
                    console.log(e)
                    var files=e.originalEvent.dataTransfer.files;//e.originalEvent屬性。該方法的作用是指向原始的事件對象（jQuery對event封裝過了）。
                    console.log(files);
                }
});

function readImgFile(file){//將圖片轉化爲base64的字符串
            //判斷是否是圖片類型
            if (!/image\/\w+/.test(file.type)) {
                alert("只能選擇圖片");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                return this.result; 
            }
}

這樣就可以實現拖拽獲取文件的功能，拖拽文件夾也可行。

打印的jQuery的事件對象

打印的files變量

打印的FormData對象