这篇文章主要介绍了HTML5拖拽文件上传的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
上传文件
HTML5新增了文件API，提供客户端本地操作文件的可能。
我们可以通过文件表单或拖放操作选择文件，还可以通过Java脚本语言读取文件的名称、大小、类型、和修改时间。
文件类型的投入表单新增了文件属性，保存我们上传文件的信息，如果要实现多文件上传，可以设置投入的多个的属性。
可以使用接受属性规定文件上传的哑剧类型例如’图像/jpeg ‘
表单操作=’# ‘
div class=’窗体-组’
=’input_1 ‘的标签请选择文件/标签
输入id=’输入_ 1 ‘ class=’表单控制’ name=’输入_ 1 ‘ type=’文件’
/div
div class=’窗体-组’
按钮id=’ BTN _ 1 ‘类=’ BTN BTN-默认’类型=’按钮’读取文件信息/按钮
/div
/表单
pre id=’结果/pre
/div
脚本
var BTN=文档。查询选择器(“# BTN _ 1”)；
var输入=文档。查询选择器(“# input _ 1”)；
btn.addEventListener(‘click ‘，function() {
//获取文件域中选择的文件
//var file=input。文件[0]；
var文件=输入。文件。项目(0)；
如果（文件){
result.innerHTML=
‘文件名：’ file.name ‘\n文件最近修改时间：’ file.lastModifiedDate ‘\n文件类型：’ file.type ‘\n文件大小：’ file.size ‘字节’
}否则{
result.innerHTML=’没有选择任何文件；
}
});
/脚本
页面拖拽操作
对于被拖拽的元素，HTML5增加了三个事件用于监听拖拽的过程
开始拖动拖拽开始
拖正在拖拽
拖动结束拖拽结束
身体
div id=’ one ‘ style=’ width:300 px；高度：300像素边框：1px纯红/div
div id=’ two ‘ style=’ width:100px；高度：100像素边框：1像素纯蓝draggable=’true’/div
/body
脚本类型=’文本/javascript ‘
two.ondragstart=function(e){
//e .防止默认()；
控制台。日志(e)；
e.dataTransfer.setData(‘Text ‘，e . target。id)；
控制台。日志(例如数据传输。获取数据(‘文本’，e .目标。id))；
one.innerHTML=’开始’
}
two.ondrag=函数(e){
one.innerHTML=’拖动中’
}
two.ondragend=function(e){
one.innerHTML=’结束’
}
/脚本
想要拖拽元素，必须设置可拖动的属性
页面默认的动作是拖拽后回到原位
在拖动阶段，我们可以存储被拖动元素的属性或者状态到事件对象的数据传输中，如果出现跳转，则是浏览器默认的事件被触发，我们需要使用预防默认()来阻止默认事件。
投放区的事件
对于被拖的元素而言，拖向何处则为投放区，投放区的事件如下：
拖动进入被拖放元素进入
德拉戈夫被拖放元素移动
休假被拖放元素离开
身体
div id=’ one ‘ style=’ width:300 px；高度：300像素边框：1px纯红/div
div id=’ two ‘ style=’ width:100px；高度：100像素边框：1像素纯蓝draggable=’true’/div
/body
脚本类型=’文本/javascript ‘
one.ondragenter=function(e){
//e .防止默认()；
控制台。日志(e)；
one.innerHTML=’开始’
}
one.ondragover=function(e){
one.innerHTML=’拖动中’
}
one.ondragleave=function(e){
one.innerHTML=’结束’
}
/脚本
而滴则是监听被拖拽物拖拽到投放区并松开鼠标的事件，他可以接收到数据传输中的数据，所以我们的页面内拖拽可以写成如下效果：
style type=’text/css ‘
*{
框大小：边框-框；
}
/风格
身体
div id=’ one ‘ style=’ width:300 px；高度：300像素边框：1px纯红/div
div id=’ two ‘ style=’ width:100px；高度：100像素边框：1px纯蓝；显示：灵活’
div style=’ width:50px；高度：100像素边框：1px纯黑色；’第一个/div
div style=’ width:50px；高度：100像素边框：1px纯粉色；’第二个/div
/div
/body
脚本类型=’文本/javascript ‘
one.ondragover=function(e) {
e。防止默认()；
}
two.onmousedown=函数(e){
e。目标。draggable=true
e . target . ondragstart=function(ev){
ev.dataTransfer.setData(‘Text ‘，ev . target . innerhtml)；
}
e.target.ondragend=function(){
二. removeChild(this)
}
}
one.ondrop=function(e) {
var div=document . createelement(‘ div ‘)
div . style=’ width:50px；高度：100px边框：1px纯黑色；’
div . innerhtml=e . data transfer . get data(‘ Text ‘)
this.appendChild(div)
}
/脚本
对于Google Chrome，e.datatransfer.setdata (key，value)在拖动到交付区域外时，会导致浏览器搜索默认设置的值。如果有必要，我们可以屏蔽它。
对于Firefox浏览器，没有e.dataTransfer.setData(key，value)是不行的。我们可以直接将键值对设置为null，“;
谷歌和火狐的最新版本没有发现问题。
drop事件是不能直接触发的，因为默认情况下，当鼠标放开后，我们的拖动会回到原来的位置，不会掉下来，所以要防止drop区域的默认事件。
拖动文件上传
经过观察，事件对象中的dataTransfer也有files属性，我们可以用熟悉的方式上传拖动的文件：
身体
div id=’ one ‘ style=’ width:300 px；高度：300px边框：1px纯红’/div
/body
脚本类型=’文本/javascript ‘
one.ondragover=function(e) {
e . prevent default()；
}
one.ondrop=function(e) {
预防默认()
console . log(e . data transfer . files[0])；
}
/脚本
然后上传Ajax文件。
one.ondrop=function(e) {
预防默认()
var file=e . data transfer . files[0]；
var formData=new formData()；
formData.append(‘aa ‘，file)；
var XML=new XMLHttpRequest()；
xml.open(‘post ‘，url，false)；
XML . send(formData)；
}
本文关于HTML5拖拽文件上传的示例代码到此为止。更多相关HTML5拖拽上传内容，请搜索脚本之家之前的文章或者继续浏览下面的相关文章。希望大家以后多多支持剧本之家！
来源：剧本之家
链接：https://www.jb51.net/html5/766229.html
