拖拽获取文件

$(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对象