本文主要介绍HTML5拖放文件上传的示例代码。文中详细介绍了样例代码，对大家的学习或工作有一定的参考学习价值。需要它的朋友将和边肖一起学习。

上传文件

HTML5增加了文件API，为客户端提供了本地操作文件的可能性。

我们可以通过文件表单或拖放来选择文件，也可以通过JavaScript来读取文件的名称、大小、类型和修改时间。

文件类型输入表单添加了文件属性来保存我们上传文件的信息。如果我们想上传多个文件，我们可以设置多个属性的输入。

您可以使用“接受”属性来指定文件上传的MIME类型，如“图像/jpeg”

表单操作='# '

div class='form-group '

='input_1 '的标签请选择一个文件/标签

input id=' input _ 1 ' class=' form-control ' name=' input _ 1 ' type=' file '

/div

div class='form-group '

按钮id=' BTN _ 1 ' class=' BTN BTN-默认' type='按钮'读取文件信息/按钮

/div

/form

pre id='result'/pre

/div

剧本

var BTN=document . query selector(' # BTN _ 1 ')；

var input=document . query selector(' # input _ 1 ')；

btn.addEventListener('click '，function() {

//在文件字段中获取所选文件

//var file=input . files[0]；

var file=input . files . item(0)；

if(文件){

result.innerHTML=

文件名：“文件.名称”\ n文件上次修改日期：“文件.上次修改日期”\ n文件类型：“文件.类型”\ n文件大小：“文件.大小”字节

} else {

Result.innerHTML='未选择文件'；

}

});

/script

页面拖动操作

对于被拖动的元素，HTML5添加了三个事件来监控拖动过程

拖动开始拖动开始

拖动就是拖动

拖动结束拖动结束

身体

div id=' one ' style=' width : 300 px；height: 300pxborder: 1px纯红色'/div

div id=' two ' style=' width : 100 px；height: 100pxborder: 1px纯蓝'可拖动='true'/div

/body

脚本类型='text/javascript '

two.ondragstart=function(e){

//e . PreventDefault()；

console . log(e)；

e.dataTransfer.setData('Text '，e . target . id)；

console . log(e . DataTransfer . GetData(' Text '，e . target . id))；

One.innerHTML=' start '

}

two.ondrag=function(e){

One.innerHTML='拖动'

}

two.ondragend=function(e){

One.innerHTML=' end '

}

/script

要拖放元素，必须设置可拖动属性

页面的默认操作是拖动并返回到原始位置