WebUploader怎样上传超大文件和断点续传

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

 

拖拽上传区域-->

class="dropBox_wrap">

<div id="dropbox" class="drop">

<h4>请将文件拖拽到此区域进行上传</h4>

</div>

</div>

 

),oBody = document.querySelector("body");

,function(evt){

        EventUtil.preventDefault(evt);

    });

,function(evt){

).removeClass("drop_leave");

        EventUtil.preventDefault(evt);

    });

,function(evt){

);

        EventUtil.preventDefault(evt);

        return false;

    });

,function(evt){

).removeClass("drop_enter");

        leaveHandler(evt);

    });

,function(evt){

        dropHandler(evt);

    });

})();

 

function dropHandler(e){

    e.preventDefault(); //阻止默认

    var fileList = e.dataTransfer.files; //获取拖拽的文件列表

 

<span "<strong="">){//如果为多个文件,遍历

        var formData = new FormData(); 

        for(var i=0;i<fileList.length;i++){

            formData.append('files', fileList[i]);//存入formData对象

        }

        ajaxFileUpload(formData); //调用文件上传方法,可以参考博客内另一篇文章:文件上传,下方会放链接

    }else{

);

    }

 

}

 

//定义拖拽离开事件

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){

+ type, handler);

        } else {

+ type] = handler;

        }

    },

 

    //移除事件监听方法

    removeHandler: function(element, type, handler){

        if (element.removeEventListener){

            element.removeEventListener(type, handler, false);

       } else if (element.detachEvent){

+ type, handler);

       } else {

+ 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;

        }

    }

js拖拽文件夹上传 – 泽优软件博客


posted @   潜水的章鱼  阅读(64)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示