脚本宝典收集整理的这篇文章主要介绍了HTML5拖拽文件上传的示例代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
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@R_512_1742@：' + file.type + '\n文件大小：' + file.size + '字节' } else { result.innerHTML = '没有选择任何文件'; } }); </script>
对于被拖拽的元素,HTML5增加了三个事件用于监听拖拽的过程
<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()来阻止默认事件。
投放区的事件
对于被拖的元素而言，拖向何处则为投放区，投放区的事件如下：
<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>
经过观察，事件对象中的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拖拽文件上传的示例代码的文章就介绍到这了,更多相关HTML5拖拽上传内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的HTML5拖拽文件上传的示例代码全部内容，希望文章能够帮你解决HTML5拖拽文件上传的示例代码所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。