制作拖拽上传
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. 文件拖拽上传怎么用
如果你注册了“网络云”打开的情况下，在桌面就可以拖拽上传了，直接把想上传的东西拖到图标上即可