当前位置:Gxlcms > JavaScript > 如何实现文件拖拽上传

如何实现文件拖拽上传

时间:2021-07-01 10:21:17 帮助过:15人阅读

拖拽选择文件

屏蔽默认事件

刚开始的时候,是在网上找了一个例子,这个例子中提到,需要在document上屏蔽和drag相关的所有事件的默认处理方式,代码如下:

$(document).on({ 
        dragleave:function(e){    //拖离 
            e.preventDefault(); 
        }, 
        drop:function(e){  //拖后放 
            e.preventDefault(); 
        }, 
        dragenter:function(e){    //拖进 
            e.preventDefault(); 
        }, 
        dragover:function(e){    //拖来拖去 
            e.preventDefault(); 
        } 
    });

实际上,在我们的文件上传中,接受拖拽的区域一般只有一个小区域,所以我对其做了如下的精简


$drop.on("dragenter", function (e) {
    e.preventDefault();
    console.log("enter");
    $drop.addClass("hover");});$drop.on("dragleave drop", function (e) {
    e.preventDefault();
    console.log("leave");
    $drop.removeClass("hover");});$drop.on("dragover", function (e) {
    e.preventDefault();})

并且,在enter事件的时候,给目标区域增加了一个hover的样式,让接受区域高亮

默认情况下是酱紫的,(所以在drop 和leave事件中要去掉这个样式

对来源不同的文件进行处理

因为要同时处理input框和拖拽区域,所以我的html结构如下:


             <p class="row" id="dropBox" @drop.prevent="Change($event)">
                <p class="import-data">
                    <button                         
                    :class="{'disabled' : resultMsg.length > 0}"                        class="btn btn-info">
                        <i class="fa fa-cloud-upload text"></i>
                        选择文件                    
                     </button>
                    <span :class="{'error-tips':isError}">{{msg}}</span>
                    <input                        
                    type="file"                         
                    v-show="resultMsg.length == 0" 
                        @change="Change($event)"                         
                        name="importExcel"                         
                        class="importExcel"                         
                        value="" />
                </p>
                <br>
                <p class="loading" :style="'width:'+loading+'%'"></p>
            </p>

#dropBox 的drop事件和input的change事件同时绑定Change函数并将event对象传入函数中
这里,我在drop事件上加入了prevent修饰符来屏蔽默认事件,如果不屏蔽事件,接受区域#dropBox 是无法接收到文件,并且文件会触发浏览器的下载(如果不能直接预览的话)或者预览;


            Change:function(ev){
                var e = window.event || ev; 
                var file = e.target.files ? e.target.files[0] : e.dataTransfer.files[0];
                if(!file){
                    vm.msg = "点击选择,或者拖拽填写好数据的excel文件致此";
                    vm.isError = true;
                    return false
                }               
            },

ps:隐去了js代码中的业务逻辑只讲述公共部分,

在接受用户选择的文件时,用e.target.files作为判断条件,来判断是否有input选择的文件,如果是则取 e.target.files[0] ,如果不是 则取 e.dataTransfer.files[0]
这两个事件对象的属性是浏览器根据不同的情况挂在事件对象上的。

以上就是如何实现文件拖拽上传 的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行