拖拽上传文件原生js剖析详解

拖拽上传，异于浏览器自带的input（type = file）标签的上传方式，基于XMLHttpRequest对象实现文件的上传的方式！！！

。

直奔主题：

html: 定义拖拽上传的区域

<div class="box"></div>

js：基于原生XMLHttpRequest 对象发送文件

//禁止浏览器打开图片行为
//必须先禁止浏览器默认行为
    document.addEventListener("drop", function (e) {  //拖离
        e.preventDefault();
    })
    document.addEventListener("dragleave", function (e) {  //拖后放
        e.preventDefault();
    })
    document.addEventListener("dragenter", function (e) {  //拖进
        e.preventDefault();
    });
    document.addEventListener("dragover", function (e) {  //拖来拖去
        e.preventDefault();
    });

//拖拽事件绑定
  document.getElementsByClassName('box')[0].addEventListener("drop", function (e) {  
        e.preventDefault();
        var files = e.dataTransfer.files;
        var xhr = new XMLHttpRequest();
        xhr.open("post", "上传文件的url", true);
        xhr.onload = function (e) {
            var result = JSON.parse(e.target.responseText);
            console.log(result);
        };
        xhr.onerror = function (err) {
            console.log(err);
        };
//设置请求头
        var headers = {
            "Accept": "application/json",
            "Cache-Control": "no-cache",
            "X-Requested-With": "XMLHttpRequest"
        };
        for (var headerName in headers) {
            var headerValue = headers[headerName];
            if (headerValue) {
                xhr.setRequestHeader(headerName, headerValue);
            }
        }
//关键点：
//  设置xhr对象send的数据格式必须是formData表单格式的数据
//    1. 有表单时：通过表单直接提交；
//    2. 没有表单时：需要手动设置表单格式数据，如下：
        var formData = new FormData();
        formData.append('file', files[0], files[0].name);
        xhr.send(formData);

    })

拓展：完整插件封装可参考：https://www.dropzonejs.com/ （个人研究底层原理的来源，感兴趣的可以研究一下咯！！！）

完整代码：

<div class="box"></div>
<script>
    //禁止浏览器打开图片行为
    document.addEventListener("drop", function (e) {  //拖离
        e.preventDefault();
    })
    document.addEventListener("dragleave", function (e) {  //拖后放
        e.preventDefault();
    })
    document.addEventListener("dragenter", function (e) {  //拖进
        e.preventDefault();
    });
    document.addEventListener("dragover", function (e) {  //拖来拖去
        e.preventDefault();
    });

    document.getElementsByClassName('box')[0].addEventListener("drop", function (e) {  //拖离
        e.preventDefault();
        var files = e.dataTransfer.files;
        var arr = files[0].name.split('.');
        var filetype = arr[arr.length - 1];
        var url = '';
        switch (filetype){
            case 'gif':
            case 'png':
            case 'jpg':
            case 'jpeg':
                url = "${web.https}/manage/image/addImage";
                break;
            default:
                url = "${web.https}/manage/file/addFile";
                break;
        }
        var xhr = new XMLHttpRequest();
        xhr.open("post", url, true);
        xhr.onload = function (e) {
            var result = JSON.parse(e.target.responseText);
            console.log(result);
            $('.box').append('<img src="${web.https}/manage/common/image/' + result.data + '?w=150" alt="">')
        };
        xhr.onerror = function (err) {
            console.log(err);
        };
        var headers = {
            "Accept": "application/json",
            "Cache-Control": "no-cache",
            "X-Requested-With": "XMLHttpRequest"
        };
        for (var headerName in headers) {
            var headerValue = headers[headerName];
            if (headerValue) {
                xhr.setRequestHeader(headerName, headerValue);
            }
        }
        var formData = new FormData();
        formData.append('file', files[0], files[0].name);
        xhr.send(formData);

    })
</script>

拖拽上传文件原生js剖析详解

猜你喜欢