plupload 上传文件夹

最新推荐文章于 2022-05-02 22:13:32 发布

ftaomanman

最新推荐文章于 2022-05-02 22:13:32 发布

阅读量1k

点赞数

分类专栏： plupload 上传文件夹文章标签： plupload 上传文件夹

plupload 上传文件夹专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了。我这里分享一下我自己开发的一套大文件上传控件供大家参考。最后附上控件包链接
工程截图

代码展示

//文件上传对象
function FileUploader(fileLoc, mgr)
{
    var _this = this;
    this.id = fileLoc.id;
    this.ui = { msg: null, process: null, percent: null, btn: { del: null, cancel: null,post:null,stop:null }, div: null};
    this.isFolder = false; //不是文件夹
    this.app = mgr.app;
    this.Manager = mgr; //上传管理器指针
    this.event = mgr.event;
    this.FileListMgr = mgr.FileListMgr;//文件列表管理器
    this.Config = mgr.Config;
    this.fields = jQuery.extend({}, mgr.Config.Fields, fileLoc.fields);//每一个对象自带一个fields幅本
    this.State = this.Config.state.None;
    this.uid = this.fields.uid;
    this.fileSvr = {
          pid: ""
        , id: ""
        , pidRoot: ""
        , f_fdTask: false
        , f_fdChild: false
        , uid: 0
        , nameLoc: ""
        , nameSvr: ""
        , pathLoc: ""
        , pathSvr: ""
        , pathRel: ""
        , md5: ""
        , lenLoc: "0"
        , sizeLoc: ""
        , FilePos: "0"
        , lenSvr: "0"
        , perSvr: "0%"
        , complete: false
        , deleted: false
    };//json obj，服务器文件信息
    this.fileSvr = jQuery.extend(this.fileSvr, fileLoc);

    //准备
    this.Ready = function ()
    {
        this.ui.msg.text("正在上传队列中等待...");
        this.State = this.Config.state.Ready;
    };

    this.svr_error = function ()
    {
        alert("服务器返回信息为空，请检查服务器配置");
        this.ui.msg.text("向服务器发送MD5信息错误");
        this.ui.btn.cancel.text("续传");
    };
    this.svr_create = function (sv)
    {
        if (sv.value == null)
        {
            this.svr_error(); return;
        }

        var str = decodeURIComponent(sv.value);//
        this.fileSvr = JSON.parse(str);//
        //服务器已存在相同文件，且已上传完成
        if (this.fileSvr.complete)
        {
            this.post_complete_quick();
        } //服务器文件没有上传完成
        else
        {
            this.ui.process.css("width", this.fileSvr.perSvr);
            this.ui.percent.text(this.fileSvr.perSvr);
            this.post_file();
        }
    };
    this.svr_update = function () {
        if (this.fileSvr.lenSvr == 0) return;
        var param = { uid: this.fields["uid"], offset: this.fileSvr.lenSvr, lenSvr: this.fileSvr.lenSvr, perSvr: this.fileSvr.perSvr, id: this.id, time: new Date().getTime() };
        $.ajax({
            type: "GET"
            , dataType: 'jsonp'
            , jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
            , url: this.Config["UrlProcess"]
            , data: param
            , success: function (msg) {}
            , error: function (req, txt, err) { alert("更新文件进度错误！" + req.responseText); }
            , complete: function (req, sta) { req = null; }
        });
    };
    this.post_process = function (json)
    {
        this.fileSvr.lenSvr = json.lenSvr;//保存上传进度
        this.fileSvr.perSvr = json.percent;
        this.ui.percent.text("("+json.percent+")");
        this.ui.process.css("width", json.percent);
        var str = json.lenPost + " " + json.speed + " " + json.time;
        this.ui.msg.text(str);
    };
    this.post_complete = function (json)
    {
        this.fileSvr.perSvr = "100%";
        this.fileSvr.complete = true;
        $.each(this.ui.btn, function (i, n)
        {
            n.hide();
        });
        this.ui.process.css("width", "100%");
        this.ui.percent.text("(100%)");
        this.ui.msg.text("上传完成");
        this.Manager.arrFilesComplete.push(this);
        this.State = this.Config.state.Complete;
        //从上传列表中删除
        this.Manager.RemoveQueuePost(this.fileSvr.id);
        //从未上传列表中删除
        this.Manager.RemoveQueueWait(this.fileSvr.id);

        var param = { md5: this.fileSvr.md5, uid: this.uid, id: this.fileSvr.id, time: new Date().getTime() };

        $.ajax({
            type: "GET"
			, dataType: 'jsonp'
			, jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
			, url: _this.Config["UrlComplete"]
			, data: param
			, success: function (msg)
			{
			    _this.event.fileComplete(_this);//触发事件
			    _this.FileListMgr.UploadComplete(_this.fileSvr);//添加到服务器文件列表
			    _this.post_next();
			}
			, error: function (req, txt, err) { alert("文件-向服务器发送Complete信息错误！" + req.responseText); }
			, complete: function (req, sta) { req = null; }
        });
    };
    this.post_complete_quick = function ()
    {
        this.fileSvr.perSvr = "100%";
        this.fileSvr.complete = true;
        this.ui.btn.stop.hide();
        this.ui.process.css("width", "100%");
        this.ui.percent.text("(100%)");
        this.ui.msg.text("服务器存在相同文件，快速上传成功。");
        this.Manager.arrFilesComplete.push(this);
        this.State = this.Config.state.Complete;
        //从上传列表中删除
        this.Manager.RemoveQueuePost(this.fileSvr.id);
        //从未上传列表中删除
        this.Manager.RemoveQueueWait(this.fileSvr.id);
        //添加到文件列表
        this.FileListMgr.UploadComplete(this.fileSvr);
        this.post_next();
        this.event.fileComplete(this);//触发事件
    };
    this.post_stoped = function (json)
    {
        this.ui.btn.post.show();
        this.ui.btn.del.show();
        this.ui.btn.cancel.hide();
        this.ui.btn.stop.hide();
        this.ui.msg.text("传输已停止....");

        if (this.Config.state.Ready == this.State)
        {
            this.Manager.RemoveQueue(this.fileSvr.id);
            this.post_next();
            return;
        }
        this.State = this.Config.state.Stop;
        //从上传列表中删除
        this.Manager.RemoveQueuePost(this.fileSvr.id);
        this.Manager.AppendQueueWait(this.fileSvr.id);//添加到未上传列表
        //传输下一个
        this.post_next();
    };
    this.post_error = function (json)
    {
        this.svr_update();
        this.ui.msg.text(this.Config.errCode[json.value]);
        this.ui.btn.stop.hide();
        this.ui.btn.post.show();
        this.ui.btn.del.show();

        this.State = this.Config.state.Error;
        //从上传列表中删除
        this.Manager.RemoveQueuePost(this.fileSvr.id);
        //添加到未上传列表
        this.Manager.AppendQueueWait(this.fileSvr.id);
        this.post_next();
    };
    this.md5_process = function (json)
    {
        var msg = "正在扫描本地文件，已完成：" + json.percent;
        this.ui.msg.text(msg);
    };
    this.md5_complete = function (json)
    {
        this.fileSvr.md5 = json.md5;
        this.ui.msg.text("MD5计算完毕，开始连接服务器...");
        this.event.md5Complete(this, json.md5);//biz event

        var loc_path = encodeURIComponent(this.fileSvr.pathLoc);
        var loc_len = this.fileSvr.lenLoc;
        var loc_size = this.fileSvr.sizeLoc;
        var param = jQuery.extend({}, this.fields, { md5: json.md5, id: this.fileSvr.id, lenLoc: loc_len, sizeLoc: loc_size, pathLoc: loc_path, time: new Date().getTime() });

        $.ajax({
            type: "GET"
            , dataType: 'jsonp'
            , jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
            , url: this.Config["UrlCreate"]
            , data: param
            , success: function (sv)
            {
                _this.svr_create(sv);
            }
            , error: function (req, txt, err)
            {
                alert("向服务器发送MD5信息错误！" + req.responseText);
                _this.ui.msg.text("向服务器发送MD5信息错误");
                _this.ui.btn.del.text("续传");
            }
            , complete: function (req, sta) { req = null; }
        });
    };
    this.md5_error = function (json)
    {
        this.ui.msg.text(this.Config.errCode[json.value]);
        //文件大小超过限制,文件大小为0
        if ("4" == json.value
			|| "5" == json.value)
        {
        	this.ui.btn.stop.hide();
        	this.ui.btn.cancel.show();
        }
        else
        {            
            this.ui.btn.post.show();
            this.ui.btn.stop.hide();
        }
        this.State = this.Config.state.Error;
        //从上传列表中删除
        this.Manager.RemoveQueuePost(this.fileSvr.id);
        //添加到未上传列表
        this.Manager.AppendQueueWait(this.fileSvr.id);

        this.post_next();
    };
    this.post_next = function ()
    {
        var obj = this;
        setTimeout(function () { obj.Manager.PostNext(); }, 500);
    };
    this.post = function ()
    {
        this.Manager.AppendQueuePost(this.fileSvr.id);
        this.Manager.RemoveQueueWait(this.fileSvr.id);
        if (this.fileSvr.md5.length > 0)
        {
            this.post_file();
        }
        else
        {
            this.check_file();
        }
    };
    this.post_file = function ()
    {
        this.ui.btn.cancel.hide();
        this.ui.btn.stop.show();
        this.State = this.Config.state.Posting;//
        this.app.postFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc, pathSvr:this.fileSvr.pathSvr,lenSvr: this.fileSvr.lenSvr, fields: this.fields });
    };
    this.check_file = function ()
    {
        //this.ui.btn.cancel.text("停止").show();
        this.ui.btn.stop.show();
        this.ui.btn.cancel.hide();
        this.State = this.Config.state.MD5Working;
        this.app.checkFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc });
    };
    this.stop = function ()
    {
        this.ui.btn.del.hide();
        this.ui.btn.cancel.hide();
        this.ui.btn.stop.hide();
        this.ui.btn.post.hide();
        this.svr_update();
        this.app.stopFile({ id: this.fileSvr.id });        
    };
    //手动停止，一般在StopAll中调用
    this.stop_manual = function ()
    {
        if (this.Config.state.Posting == this.State)
        {
            this.svr_update();
        	this.ui.btn.post.show();
        	this.ui.btn.stop.hide();
        	this.ui.btn.cancel.hide();
            this.ui.msg.text("传输已停止....");
            this.app.stopFile({ id: this.fileSvr.id ,tip:false});
            this.State = this.Config.state.Stop;
        }
    };

    //删除，一般在用户点击"删除"按钮时调用
    this.remove = function ()
    {
        this.Manager.del_file(this.fileSvr.id);
        this.app.delFile(this.fileSvr);
        this.ui.div.remove();
    };
}

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
using System.Web;
using up6.db.biz;
using up6.db.utils;

namespace up6.db
{
    public partial class f_post : System.Web.UI.Page
    {
        bool safe_check(params string[] ps)
        {
            foreach (var v in ps)
            {
                System.Diagnostics.Debug.Write("参数值：");
                System.Diagnostics.Debug.WriteLine(v);
                if (string.IsNullOrEmpty(v)) return false;
            }
            foreach (string key in Request.Headers.Keys)
            {
                var vs = Request.Headers.GetValues(key);
                //XDebug.Output(key + " "+String.Join(",", vs));
            }
            return true;
        }

        /// <summary>
        /// 只负责拼接文件块。将接收的文件块数据写入到文件中。
        /// 更新记录：
        ///		2012-04-12 更新文件大小变量类型，增加对2G以上文件的支持。
        ///		2012-04-18 取消更新文件上传进度信息逻辑。
        ///		2012-10-30 增加更新文件进度功能。
        ///		2015-03-19 文件路径由客户端提供，此页面不再查询文件在服务端的路径。减少一次数据库访问操作。
        ///     2016-03-31 增加文件夹信息字段
        ///     2017-07-11 优化参数检查逻辑
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            string uid          = Request.Headers["uid"];
            string f_id         = Request.Headers["id"];
            string lenSvr       = Request.Headers["lenSvr"];//已传大小
            string lenLoc       = Request.Headers["lenLoc"];//本地文件大小
            string blockOffset  = Request.Headers["blockOffset"];
            string blockSize    = Request.Headers["blockSize"];//当前块大小
            string blockIndex   = Request.Headers["blockIndex"];//当前块索引，基于1
            string blockMd5     = Request.Headers["blockMd5"];//块MD5
            string complete     = Request.Headers["complete"];//true/false
            string pathSvr      = Request.Form["pathSvr"];//
            pathSvr             = HttpUtility.UrlDecode(pathSvr);

            if( !this.safe_check(lenLoc,uid,f_id,blockOffset,pathSvr)) return;

            //有文件块数据
            if (Request.Files.Count > 0)
            {
                bool verify = false;
                string msg = string.Empty;
                string md5Svr = string.Empty;
                HttpPostedFile file = Request.Files.Get(0);//文件块

                //计算文件块MD5
                if (!string.IsNullOrEmpty(blockMd5))
                {
                    md5Svr = Md5Tool.calc(file.InputStream);
                }

                //文件块大小验证
                verify = int.Parse(blockSize) == file.InputStream.Length;
                if (!verify)
                {
                    msg = "block size error sizeSvr:"+file.InputStream.Length + " sizeLoc:"+blockSize;
                }

                //块MD5验证
                if ( verify && !string.IsNullOrEmpty(blockMd5) )
                {
                    verify = md5Svr == blockMd5;
                    if(!verify) msg = "block md5 error";
                }

                if (verify)
                {
                    //2.0保存文件块数据
                    FileBlockWriter res = new FileBlockWriter();
                    res.make(pathSvr, Convert.ToInt64(lenLoc));
                    res.write(pathSvr, Convert.ToInt64(blockOffset), ref file);
                    up6_biz_event.file_post_block(f_id,Convert.ToInt32(blockIndex));

                    //生成信息
                    JObject o = new JObject();
                    o["msg"] = "ok";
                    o["md5"] = md5Svr;//文件块MD5
                    o["offset"] = blockOffset;//偏移
                    msg = JsonConvert.SerializeObject(o);
                }
                Response.Write(msg);
            }
        }
    }
}

功能介绍

树形目录导航。您可以通过树型目录导航和路径导航栏快速跳转到指定目录。在跳转后树型目录将会自动选中当前的目录。

文件和目录重命名

点击删除按钮

说明: http://qqadapt.qpic.cn/adapt/0/a08d8c16-78a3-7ce5-c2cd-5df1e60fb8cc/800?pt=0&ek=1&kp=1&sce=0-12-12

点击确定后，页面中的文件消失

批量上传文件

粘贴上传

复制文件夹、文件或图片

说明: http://qqadapt.qpic.cn/adapt/0/ab61b9d4-755b-ee18-376d-f4ac80ad6417/800?pt=0&ek=1&kp=1&sce=0-12-12

在页面中选择好相应的上传目录，点击粘贴上传按钮，数据即可快速开始上传

说明: http://qqadapt.qpic.cn/adapt/0/b9fa01e5-ebec-3887-6726-67dcbc1a77ef/800?pt=0&ek=1&kp=1&sce=0-12-12

批量上传文件和文件夹

文件和目录下载

批量下载

同时选择多个需要下载的文件

然后点击下载按钮，设置下载目录文件夹

$说明: C:\Users\Administrator\Desktop\2222.png$

点击全部下载，开始下载

自动加载未上传完的任务。在刷新浏览器或重启电脑后仍然可以自动加载未完成的任务。

下载完成后打开我们设置的下载目录文件夹，发现需下载的文件或文件夹确认已下载成功，经确认文件夹内的内容与下载文件夹内容一致

说明: http://qqadapt.qpic.cn/adapt/0/3224196a-396c-8ee1-b509-3179302fbd86/800?pt=0&ek=1&kp=1&sce=0-12-12

数据库记录

控件包下载：
cab(x86)：http://t.cn/Ai9pmG8S

cab(x64)：http://t.cn/Ai9pm04B

xpi：http://t.cn/Ai9pubUc

crx：http://t.cn/Ai9pmrcy

exe：http://t.cn/Ai9puobe

示例下载：

asp.net：http://t.cn/Ai9pue4A

在线教程：
asp.net-文件管理器教程：http://j.mp/2MLoQWf

ftaomanman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
plupload 上传文件夹

一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了。我这里分享一下我自己开发的一套大文件上传控件供大家参考。最后附上控件包链接工程截图代码展示//文件上传对象function FileUploader(fileLoc, mgr){ var _this = this;...
复制链接

扫一扫