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

2024-11-2 22:24| 发布者: 8b79| 查看: 144| 评论: 0

摘要: 上传文件 HTML5新增了文件API,提供客户端本地操纵文件的大概. 我们可以通过file表单或拖放操纵选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间. file类型的input表单新增了files属性,生存我们

上传文件

HTML5新增了文件API,提供客户端本地操纵文件的大概.

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

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

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

[code] <form action="#"> <div class="form-group"> <label for="input_1">请选择文件</label> <input id="input_1" class="form-control" name="input_1" type="file"> </div> <div class="form-group"> <button id="btn_1" class="btn btn-default" type="button">读取文件信息</button> </div> </form> <pre id="result"></pre> </div> <script> 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> [/code]

页面拖拽操纵

对于被拖拽的元素,HTML5增长了三个变乱用于监听拖拽的过程

dragstart 拖拽开始
drag 正在拖拽
dragend 拖拽结束

[code] <body> <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div> <div id="two" style="width: 100px;height: 100px;border: 1px solid blue" draggable="true"></div> </body> <script type="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 = '开始' } two.ondrag = function(e){ one.innerHTML += '拖动中' } two.ondragend = function(e){ one.innerHTML = '结束' } </script>[/code]

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

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

在拖动阶段，我们可以存储被拖动元素的属性大概状态到变乱对象的dataTransfer中，如果出现跳转，则是欣赏器默认的变乱被触发，我们须要使用e.preventDefault()来阻止默认变乱。

投放区的变乱

对于被拖的元素而言，拖向那边则为投放区，投放区的变乱如下：

dragenter 被拖放元素进入
dragover 被拖放元素移动
dragleave 被拖放元素离开

[code] <body> <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div> <div id="two" style="width: 100px;height: 100px;border: 1px solid blue" draggable="true"></div> </body> <script type="text/javascript"> one.ondragenter = function(e){ // e.preventDefault(); console.log(e); one.innerHTML = '开始' } one.ondragover = function(e){ one.innerHTML += '拖动中' } one.ondragleave = function(e){ one.innerHTML = '结束' } </script> [/code]

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

[code] <style type="text/css"> *{ box-sizing: border-box; } </style> <body> <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div> <div id="two" style="width: 100px;height: 100px;border: 1px solid blue;display: flex;"> <div style="width: 50px;height: 100px;border:1px solid black;">第一个</div> <div style="width: 50px;height: 100px;border:1px solid pink;">第二个</div> </div> </body> <script type="text/javascript"> 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> [/code]

对于谷歌欣赏器，e.dataTransfer.setData(key,value)会导致拖拽到投放地区外的时间欣赏器默认搜索设置的值。如果须要，我们可以屏蔽它
对于火狐欣赏器，没有e.dataTransfer.setData(key，value)还不可。我们可以直接设置键值对为null，"";
最新版本的谷歌和火狐欣赏器没有发现题目
drop变乱并不能直接触发,因为默认的松开鼠标我们的拖拽物会返回原来的位置,并不会掉落,所以我们应该阻止投放地区的默认变乱.

拖拽文件上传

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

[code] <body> <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div> </body> <script type="text/javascript"> one.ondragover = function(e) { e.preventDefault(); } one.ondrop = function(e) { e.preventDefault() console.log(e.dataTransfer.files[0]); } </script> [/code]

然后做Ajax文件上传即可

[code] 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); } [/code]

到此这篇关于HTML5拖拽文件上传的示例代码的文章就先容到这了,更多相干HTML5拖拽上传内容请搜索脚本之家以前的文章或继续欣赏下面的相干文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/766229.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：html5利用window.postMessage进行跨域实现数据交互的一次实战下一篇：Html5移动端div固定到底部实现底部导航条的几种方式

账号		自动登录	找回密码
密码			立即注册

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

上传文件

页面拖拽操纵

拖拽文件上传

相关分类

站长推荐 /6