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文件类型：' + 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拖拽文件上传的示例代码的文章就介绍到这了,更多相关HTML5拖拽上传内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！