本文摘要：在.NET 2.0时代，大容量文件上传问题通过修改web.config或使用Flash等方法解决，但存在操作复杂、稳定性差等问题。进入HTML5时代后，借助Plupload这一前端脚本库，利用分片上传技术有效简化了该问题。Plupload能自动检测浏览器支持情况，并依次采用HTML5、Flash或Silverlight进行文件上传，同时提供丰富的事件监听功能，如文件选取、上传进度、成功及失败回调等。开发者可通过Install-Package Plupload便捷安装，并结合UploadCoursePackage.ashx处理分片与不分片的上传逻辑，实现安全高效的文件上传及进度展示。

转载文章

本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_45525177/article/details/100654639。

该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。

作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

大容量文件上传早已不是什么新鲜问题，在.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/

本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_45525177/article/details/100654639。

该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。

作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

名词解释

作为当前文章的名词解释，仅对当前文章有效。

HTML5分片上传技术：HTML5分片上传技术是一种利用现代浏览器支持的File API和Blob对象，将大文件分割成多个小块进行独立上传的技术。在本文中，该技术被Plupload库采用以解决大容量文件上传时可能遇到的性能、稳定性和断点续传等问题。通过分片上传，即使在网络不稳定或中断的情况下，也可以仅重新上传未成功上传的分片，从而提高上传效率并确保数据完整性。

Plupload前端脚本库：Plupload是一个强大的JavaScript库，主要用于实现跨浏览器的文件上传功能。它能够自动检测并适应不同的运行环境（如HTML5、Flash、Silverlight或传统的HTML4），选择最合适的上传方式。在文章中，开发者借助Plupload库封装了HTML5分片上传技术，并提供了丰富的事件监听接口，使得开发者可以方便地处理文件上传过程中的各种状态，包括文件选取、上传进度、成功或失败回调等。

multipart_params参数：multipart_params是在使用Plupload库时的一个自定义HTTP请求参数设置项。在实际上传过程中，用户可以通过这个参数向服务器端传递额外的信息，例如在文中提到的type=misoft，用于标识上传文件的类型或用途。在后端代码UploadCoursePackage.ashx中，可以从请求参数中获取到这些自定义参数值，并根据它们执行相应的业务逻辑。这一特性增强了上传功能的灵活性和可定制性。