js文件上传之拖拽上传

由于项目需要上传文件到服务器，于是便在文件上传的基础上增加了拖拽上传。拖拽上传当然属于文件上传的一部分，只不过在文件上传的基础上增加了拖拽的界面，主要在于前台的交互，

从拖拽的文件中获取文件列表然后调用上传方法即可。拖拽上传能给用户多一种选择，提高用户体验，下面是最简单的一个推拽上传示例

HTML部分：

<!--拖拽上传区域-->
<div class="dropBox_wrap">
<div id="dropbox" class="drop">
<h4>请将文件拖拽到此区域进行上传</h4>
</div>
</div>

Js部分：

//监听拖拽放置区域拖拽事件
(function(){
    var oDrop = document.getElementById("dropbox"),oBody =           document.querySelector("body");
    EventUtil.addHandler(oDrop,"dragenter",function(evt){
        EventUtil.preventDefault(evt);
    });
    EventUtil.addHandler(oDrop,"dragover",function(evt){
        $(oDrop).addClass("drop_enter").removeClass("drop_leave");
        EventUtil.preventDefault(evt);
    });
    EventUtil.addHandler(oBody,"drop",function(evt){
        $(oDrop).removeClass("drop_leave drop_enter");
        EventUtil.preventDefault(evt);
        return false;
    });
    EventUtil.addHandler(oDrop,"dragleave",function(evt){
        $(oDrop).addClass("drop_leave").removeClass("drop_enter");
        leaveHandler(evt);
    });
    EventUtil.addHandler(oDrop,"drop",function(evt){
        dropHandler(evt);
    });
})();

function dropHandler(e){
    e.preventDefault();  //阻止默认
    var fileList = e.dataTransfer.files; //获取拖拽的文件列表

    if(fileList.length>0&&fileList[0].type != ""){//如果为多个文件，遍历
        var formData = new FormData();  
        for(var i=0;i<fileList.length;i++){
            formData.append('files', fileList[i]);//存入formData对象
        }
        ajaxFileUpload(formData); //调用文件上传方法,可以参考博客内另一篇文章：文件上传，下方会放链接
    }else{
        alert("请上传单个或多个文件");
    }

}

//定义拖拽离开事件
function leaveHandler(e){

}
});

//定义事件处理程序方法
//element:dom对象，type:事件类型，handler:事件处理方法
var EventUtil = {
    //添加事件监听方法
    addHandler: function(element, type, handler){ 
        if (element.addEventListener){ 
            element.addEventListener(type, handler, false); 
        } else if (element.attachEvent){ 
            element.attachEvent("on" + type, handler); 
        } else { 
            element["on" + type] = handler;
        } 
    }, 

    //移除事件监听方法
    removeHandler: function(element, type, handler){ 
        if (element.removeEventListener){ 
            element.removeEventListener(type, handler, false); 
       } else if (element.detachEvent){ 
            element.detachEvent("on" + type, handler); 
       } else { 
        element["on" + type] = null; 
        } 
    },

    //获取事件对象
    getEvent: function(event){ 
        return event ? event : window.event;
    },
    getTarget: function(event){ 
        return event.target || event.srcElement; 
    }, 

    //阻止默认行为
    preventDefault: function(event){
        if (event.preventDefault){ 
            event.preventDefault(); 
        } else { 
            event.returnValue = false; 
        } 
    }, 
    //阻止事件冒泡
    stopPropagation: function(event){ 
        if (event.stopPropagation){ 
            event.stopPropagation(); 
        } else { 
            event.cancelBubble = true; 
        } 
    }
}

文件上传方法：ajaxFileUpload(formData) 可以参考文件上传文章中的方法，传送门=>>

js文件上传之拖拽上传

猜你喜欢