拖拽上传文件原生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>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值