plupload上传整个文件夹

大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而这些解决问题的方法要么很麻烦,比如改配置,要么不稳定,比如文件上G以后,上传要么死掉,要么卡住,通过设置web.config并不能很好的解决这些问题。

 

这是一个Html5统治浏览器的时代,在这个新的时代,这种问题已被简化并解决,我们可以利用Html5分片上传的技术,那么Plupload则是一个对此技术进行封装的前端脚本库,这个库的好处是可以自动检测浏览器是否支持html5技术,不支持再检测是否支持flash技术,甚至是sliverlight技术,如果支持,就使用检测到的技术。

那么这个库到哪里下载,怎么搭建呢,比较懒的童鞋还是用Install-Package Plupload搞定吧,一个命令搞定所有事

 

Plupload支持的功能这里就不细说了,什么批量上传,这里我没有用到,主要是感觉它支持的事件非常丰富,文件选取后的事件,文件上传中的事件(可获得文件的上传进度),文件上传成功的事件,文件上传失败的事件,等等

我的例子主要是上传一个单个文件,并显示上传的进度条(使用jQuery的一个进度条插件)

下面的例子主要是为文件上传交给 UploadCoursePackage.ashx 来处理

/******************************************************ProgressBar********************************************************/

var progressBar = $("#loading").progressbar({ width: '500px', color: '#B3240E', border: '1px solid #000000' });

/******************************************************Plupload***********************************************************/

//实例化一个plupload上传对象

var uploader = new plupload.Uploader({

    browse_button: 'browse'//触发文件选择对话框的按钮,为那个元素id

    runtimes: 'html5,flash,silverlight,html4',//兼容的上传方式

    url: "Handlers/UploadCoursePackage.ashx"//后端交互处理地址

    max_retries: 3,     //允许重试次数

    chunk_size: '10mb'//分块大小

    rename: true,  //重命名

    dragdrop: false//允许拖拽文件进行上传

    unique_names: true//文件名称唯一性

 

    filters: { //过滤器

        max_file_size: '999999999mb'//文件最大尺寸

        mime_types: [ //允许上传的文件类型

            { title: "Zip", extensions: "zip" },

            { title: "PE", extensions: "pe" }

        ]

    },

    //自定义参数 (键值对形式) 此处可以定义参数

    multipart_params: {

        type: "misoft"

    },

    // FLASH的配置

    flash_swf_url: "../Scripts/plupload/Moxie.swf",

 

    // Silverligh的配置

    silverlight_xap_url: "../Scripts/plupload/Moxie.xap",

 

    multi_selection: false //true:ctrl多文件上传, false 单文件上传 

});

 

//在实例对象上调用init()方法进行初始化

uploader.init();

 

uploader.bind('FilesAdded'function (uploader, files)

{

    $("#<%=fileSource.ClientID %>").val(files[0].name);

    $.ajax(

    {

        type: 'post',

        url: 'HardDiskSpace.aspx/GetHardDiskFreeSpace',

        data: {},

        dataType: 'json',

        contentType: 'application/json;charset=utf-8',

        success: function (result)

        {

            //选择文件以后检测服务器剩余磁盘空间是否够用

            if (files.length > 0)

            {

                if (parseInt(files[0].size) > parseInt(result.d))

                {

                    $('#error-msg').text("文件容量大于剩余磁盘空间,请联系管理员!");

                } else

                {

                    $('#error-msg').text("");

                }

            }

        },

        error: function (xhr, err, obj)

        {

            $('#error-msg').text("检测服务器剩余磁盘空间失败");

        }

    });

});

 

uploader.bind('UploadProgress'function (uploader, file)

{

    var percent = file.percent;

    progressBar.progress(percent);

});

 

uploader.bind('FileUploaded'function (up, file, callBack)

{

    var data = $.parseJSON(callBack.response);

    if (data.statusCode === "1")

    {

        $("#<%=hfPackagePath.ClientID %>").val(data.filePath);

        var id = $("#<%=hfCourseID.ClientID %>").val();

        __doPostBack("save", id);

    } else

    {

        hideLoading();

        $('#error-msg').text(data.message);

    }

});

 

uploader.bind('Error'function (up, err)

{

    alert("文件上传失败,错误信息: " + err.message);

});

/******************************************************Plupload***********************************************************/

 

 

 

后台 UploadCoursePackage.ashx 的代码也重要,主要是文件分片跟不分片的处理方式不一样

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.IO;

 

namespace WebUI.Handlers

{

    /// <summary>

    /// UploadCoursePackage 的摘要说明

    /// </summary>

    public class UploadCoursePackage : IHttpHandler

    {

 

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

 

            int statuscode = 1;

            string message = string.Empty;

            string filepath = string.Empty;

 

            if (context.Request.Files.Count > 0)

            {

                try

                {

                    string resourceDirectoryName = System.Configuration.ConfigurationManager.AppSettings["resourceDirectory"];

                    string path = context.Server.MapPath("~/" + resourceDirectoryName);

                    if (!Directory.Exists(path))

                        Directory.CreateDirectory(path);

 

                    int chunk = context.Request.Params["chunk"] != null ? int.Parse(context.Request.Params["chunk"]) : 0; //获取当前的块ID,如果不是分块上传的。chunk则为0

                    string fileName = context.Request.Params["name"]; //这里写的比较潦草。判断文件名是否为空。

                    string type = context.Request.Params["type"]; //在前面JS中不是定义了自定义参数multipart_params的值么。其中有个值是type:"misoft",此处就可以获取到这个值了。获取到的type="misoft";

 

                    string ext = Path.GetExtension(fileName);

                    //fileName = string.Format("{0}{1}", Guid.NewGuid().ToString(), ext);

                    filepath = resourceDirectoryName + "/" + fileName;

                    fileName = Path.Combine(path, fileName);

 

                    //对文件流进行存储 需要注意的是 files目录必须存在(此处可以做个判断) 根据上面的chunk来判断是块上传还是普通上传 上传方式不一样 ,导致的保存方式也会不一样

                    FileStream fs = new FileStream(fileName, chunk == 0 ? FileMode.OpenOrCreate : FileMode.Append);

                    //write our input stream to a buffer

                    Byte[] buffer = null;

                    if (context.Request.ContentType == "application/octet-stream" && context.Request.ContentLength > 0)

                    {

                        buffer = new Byte[context.Request.InputStream.Length];

                        context.Request.InputStream.Read(buffer, 0, buffer.Length);

                    }

                    else if (context.Request.ContentType.Contains("multipart/form-data") && context.Request.Files.Count > 0 && context.Request.Files[0].ContentLength > 0)

                    {

                        buffer = new Byte[context.Request.Files[0].InputStream.Length];

                        context.Request.Files[0].InputStream.Read(buffer, 0, buffer.Length);

                    }

 

                    //write the buffer to a file.

                    if (buffer != null)

                        fs.Write(buffer, 0, buffer.Length);

                    fs.Close();

 

                    statuscode = 1;

                    message = "上传成功";

 

                }

                catch (Exception ex)

                {

                    statuscode = -1001;

                    message = "保存时发生错误,请确保文件有效且格式正确";

 

                    Util.LogHelper logger = new Util.LogHelper();

                    string path = context.Server.MapPath("~/Logs");

                    logger.WriteLog(ex.Message, path);

                }

            }

            else

            {

                statuscode = -404;

                message = "上传失败,未接收到资源文件";

            }

 

            string msg = "{\"statusCode\":\"" + statuscode + "\",\"message\":\"" + message + "\",\"filePath\":\"" + filepath + "\"}";

            context.Response.Write(msg);

        }

 

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

 

再附送一个检测服务器端硬盘剩余空间的功能吧

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Web;

using System.Web.Script.Services;

using System.Web.Services;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace WebUI

{

    public partial class CheckHardDiskFreeSpace : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

 

        }

 

        /// <summary>

        /// 获取磁盘剩余容量

        /// </summary>

        /// <returns></returns>

        [WebMethod]

        public static string GetHardDiskFreeSpace()

        {

            const string strHardDiskName = @"F:\";

 

            var freeSpace = string.Empty;

            var drives = DriveInfo.GetDrives();

            var myDrive = (from drive in drives

                where drive.Name == strHardDiskName

                select drive).FirstOrDefault();

            if (myDrive != null)

            {

                freeSpace = myDrive.TotalFreeSpace+"";

            }

            return freeSpace;

        }

    }

}

 

效果展示:      

说明: http://bbsres2.ncmem.com/731fda07.png

详细配置信息可以参考这篇文章:http://blog.ncmem.com/wordpress/2019/08/12/plupload%e4%b8%8a%e4%bc%a0%e6%95%b4%e4%b8%aa%e6%96%87%e4%bb%b6%e5%a4%b9-2/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
plupload是一个基于HTML5和Flash技术的开源文件上传组件,它不仅可以用于上传文件,还可以用于下载文件。 使用plupload进行下载,首先需要构建一个下载按钮,并为其绑定点击事件。当用户点击下载按钮时,可以通过调用plupload的API方法,向服务器发送下载请求。服务器收到下载请求后,可以将对应的文件发送给客户端进行下载。 在plupload中,可以使用settings对象的url属性来指定下载的服务器地址。可以自定义一个下载接口,当plupload发送下载请求时,该接口负责根据请求中的参数,获取文件的路径,读取文件内容,并发送给客户端进行下载。 例如,构建一个下载按钮的示例代码如下: ```html <button id="downloadBtn">下载文件</button> <script src="plupload.js"></script> <script> // 绑定下载按钮点击事件 document.getElementById('downloadBtn').addEventListener('click', function() { // 使用plupload的API方法发送下载请求 plupload.addFile({ name: 'filename.ext', // 文件名 url: 'download.php' // 下载接口地址 }); }); </script> ``` 在download.php文件中,可以获取到plupload发送的下载请求,根据请求中的参数,读取对应的文件,并将文件内容发送给客户端。下载文件的代码如下: ```php <?php $filename = $_GET['filename']; // 获取下载文件名 // 设置响应头信息,告诉浏览器下载文件 header('Content-Disposition: attachment; filename='.$filename); header('Content-Type: application/octet-stream'); header('Content-Transfer-Encoding: binary'); header('Content-Length: '. filesize($filename)); // 输出文件内容 readfile($filename); ?> ``` 以上就是使用plupload进行文件下载的简单示例。当用户点击下载按钮时,plupload将发送下载请求到download.php接口,该接口会读取文件内容并发送给客户端,实现文件下载功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值