极乐门资源网 Design By www.ioogu.com
上传文件
HTML5新增了文件API,提供客户端本地操作文件的可能.
我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间.
file类型的input表单新增了files属性,保存我们上传文件的信息,如果要实现多文件上传,可以设置input的multiple属性.
可以使用accept属性规定文件上传的MIME类型 例如’image/jpeg’
<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>
页面拖拽操作
对于被拖拽的元素,HTML5增加了三个事件用于监听拖拽的过程
- dragstart 拖拽开始
- drag 正在拖拽
- dragend 拖拽结束
<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>
想要拖拽元素,必须设置draggable属性
页面默认的动作是拖拽后回到原位
在拖动阶段,我们可以存储被拖动元素的属性或者状态到事件对象的dataTransfer中,如果出现跳转,则是浏览器默认的事件被触发,我们需要使用e.preventDefault()来阻止默认事件。
投放区的事件
对于被拖的元素而言,拖向何处则为投放区,投放区的事件如下:
- dragenter 被拖放元素进入
- dragover 被拖放元素移动
- dragleave 被拖放元素离开
<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>
而drop则是监听被拖拽物拖拽到投放区并松开鼠标的事件,他可以接收到dataTransfer中的数据,所以我们的页面内拖拽可以写成如下效果:
<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>
- 对于谷歌浏览器,e.dataTransfer.setData(key,value)会导致拖拽到投放区域外的时候浏览器默认搜索设置的值。如果需要,我们可以屏蔽它
- 对于火狐浏览器,没有e.dataTransfer.setData(key,value)还不行。我们可以直接设置键值对为null,"";
- 最新版本的谷歌和火狐浏览器没有发现问题
- drop事件并不能直接触发,因为默认的松开鼠标我们的拖拽物会返回原来的位置,并不会掉落,所以我们应该阻止投放区域的默认事件.
拖拽文件上传
经过观察,事件对象中的dataTransfer也存在files属性,我们可以用熟悉的方法上传拖拽进来的文件:
<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>
然后做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); }
标签:
HTML5,拖拽上传,文件上传
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无HTML5拖拽文件上传的示例代码的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]