HTML5拖拽文件上传的示例代码-白红宇

HTML5拖拽文件上传的示例代码

阅读量：2352 次

发布时间：2019-05-10

本文共 4258 字，大约阅读时间需要 14 分钟。

上传文件

HTML5新增了文件API,提供客户端本地操作文件的可能.

我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间.

file类型的input表单新增了files属性,保存我们上传文件的信息,如果要实现多文件上传,可以设置input的multiple属性.

可以使用accept属性规定文件上传的MIME类型例如’image/jpeg’

<label for="input_1">请选择文件</label>

</div>

<button id="btn_1" class="btn btn-default" type="button">读取文件信息</button>

</div>

</form>

</div>

var btn = document.querySelector('#btn_1');

var input = document.querySelector('#input_1');

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

// 获取文件域中选择的文件

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

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

if (file) {

result.innerHTML =

'文件名：' + file.name + '\n文件最近修改时间：' + file.lastModifiedDate+ '\n文件类型：' + file.type + '\n文件大小：' + file.size + '字节'

} else {

result.innerHTML = '没有选择任何文件';

}

});

</script>

页面拖拽操作

对于被拖拽的元素,HTML5增加了三个事件用于监听拖拽的过程

dragstart 拖拽开始

drag 正在拖拽

dragend 拖拽结束

<body>

</body>

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 = '开始'

}

two.ondrag = function(e){

one.innerHTML += '拖动中'

}

two.ondragend = function(e){

one.innerHTML = '结束'

}

</script>

想要拖拽元素,必须设置draggable属性

页面默认的动作是拖拽后回到原位

在拖动阶段，我们可以存储被拖动元素的属性或者状态到事件对象的dataTransfer中，如果出现跳转，则是浏览器默认的事件被触发，我们需要使用e.preventDefault()来阻止默认事件。

投放区的事件

对于被拖的元素而言，拖向何处则为投放区，投放区的事件如下：

dragenter 被拖放元素进入

dragover 被拖放元素移动

dragleave 被拖放元素离开

<body>

</body>

one.ondragenter = function(e){

// e.preventDefault();

console.log(e);

one.innerHTML = '开始'

}

one.ondragover = function(e){

one.innerHTML += '拖动中'

}

one.ondragleave = function(e){

one.innerHTML = '结束'

}

</script>

而drop则是监听被拖拽物拖拽到投放区并松开鼠标的事件，他可以接收到dataTransfer中的数据，所以我们的页面内拖拽可以写成如下效果：

box-sizing: border-box;

}

</style>

<body>

</div>

</body>

one.ondragover = function(e) {

e.preventDefault();

}

two.onmousedown = function(e){

e.target.draggable = true;

e.target.ondragstart = function(ev) {

ev.dataTransfer.setData("Text", ev.target.innerHTML);

}

e.target.ondragend = function(){

two.removeChild(this)

}

one.ondrop = function(e) {

var div = document.createElement('div')

div.style = "width: 50px;height: 100px;border:1px solid black;"

div.innerHTML = e.dataTransfer.getData("Text")

this.appendChild(div)

}

</script>

对于谷歌浏览器，e.dataTransfer.setData(key,value)会导致拖拽到投放区域外的时候浏览器默认搜索设置的值。如果需要，我们可以屏蔽它

对于火狐浏览器，没有e.dataTransfer.setData(key，value)还不行。我们可以直接设置键值对为null，"";

最新版本的谷歌和火狐浏览器没有发现问题

drop事件并不能直接触发,因为默认的松开鼠标我们的拖拽物会返回原来的位置,并不会掉落,所以我们应该阻止投放区域的默认事件.

拖拽文件上传

经过观察，事件对象中的dataTransfer也存在files属性，我们可以用熟悉的方法上传拖拽进来的文件：

<body>

</body>

one.ondragover = function(e) {

e.preventDefault();

}

one.ondrop = function(e) {

e.preventDefault()

console.log(e.dataTransfer.files[0]);

}

</script>

然后做Ajax文件上传即可

one.ondrop = function(e) {

e.preventDefault()

var file = e.dataTransfer.files[0];

var formData = new FormData();

formData.append("aa", file);

var xml = new XMLHttpRequest();

xml.open("post", url, false);

xml.send(formData);

}

转载地址：http://cxevb.baihongyu.com/

你可能感兴趣的文章

SpringCloud 2.x学习笔记：4、Zuul（Greenwich版本）

查看>>

ajax提交JSON数组及Springboot接收转换为list类

查看>>

SpringCloud 2.x学习笔记：5、Config（Greenwich版本）

localhost与127.0.0.1的区别

查看>>

windows下的host文件在哪里，有什么作用?

解决PKIX：unable to find valid certification path to requested target 的问题

查看>>

hibernate.cfg.xml配置详解

查看>>

hibernate+proxool的数据库连接池配置方法

查看>>