html5 文件上传-HTML5拖放文件上传示例代码

bendan520 html

2023-08-23 0 4,515 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

本文主要介绍HTML5拖拽文件上传的示例代码。文章中详细介绍了示例代码。对您的学习或工作有一定的参考学习价值。有需要的同事就跟着小编一起学习学习吧

上传文件

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

我们可以通过文件表单或拖放操作来选择文件，还可以通过JavaScript读取文件名、大小、类型和更改时间。

文件类型的输入形式添加了一个files属性来保存我们上传的文件的信息。如果要上传多个文件，可以设置input的multiple属性。

您可以使用accept属性指定文件上传的MIME类型，例如'image/jpeg'


        
            请选择文件
            
        
        
            
        



页面拖放

对于拖放元素，HTML5减少了用于窃听拖放过程的三场风暴

    
    


    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 = '结束'
    }


要拖放元素，必须设置draggable属性
页面默认动作是拖拽后返回原位置

在拖动阶段，我们可以将被拖动元素的属性或状态存储在storm对象的dataTransfer中。 如果有跳转html5 文件上传，就会触发浏览器默认的风暴。 我们需要使用 e.preventDefault() 来防止默认混乱。
降落区的混乱
对于被拖动的元素，被拖动的地方就是拖放区域，拖放区域的情况如下：

    
    


    one.ondragenter = function(e){
        // e.preventDefault();
        console.log(e);
        one.innerHTML = '开始'
    }
    one.ondragover = function(e){
        one.innerHTML += '拖动中'
    }
    one.ondragleave = function(e){
        one.innerHTML = '结束'
    }



而drop则是监听拖放的对象，将其放入放置区域并提起键盘。 它可以接收dataTransfer中的数据，所以我们页面中的拖放可以这样写：

    *{
        box-sizing: border-box;
    }


    
    
        第一个
        第二个
    


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)
}



拖放文件上传
经过观察html5 文件上传，storm对象中的dataTransfer也有files属性，我们可以用熟悉的方式上传拖放的文件：

    


one.ondragover = function(e) {
    e.preventDefault();
}
one.ondrop = function(e) {
    e.preventDefault()
    console.log(e.dataTransfer.files[0]);
}



然后进行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拖拽上传内容，请搜索Scripter House之前的文章或者继续浏览下面的相关文章。 希望您今后给予我们更多的支持。 脚本之家！