目录
在许多应用场景里,多文件上传是一项比较实用的功能。实际应用中,多文件上传可以考虑如下需求:
1、对上传文件的类型、大小有一个基本的控制。
2、上传文件时有一个进度显示,包括当前文件和整体进度。
3、上传后,在服务端后续事件进行一些处理。
首先请在WEB应用程序根目录下创建COMMON目录,并引入 JavaScript 程序包,该程序包已经打包,下载地址为:https://download.csdn.net/download/michaelline/88615565。
下载成功后解压到COMMON目录即可,请引入如下图中的 JS 文件:
另外,我们还需要在 app_data目录下创建?ajaxUploadFiles 子目录,以备上传创建文件使用。
界面上放置标准的 input file 控件,并将其服务器化,即 runat="server"。点击选择文件,选中所有目标文件后,自动实现文件上传功能。
示例界面如下:
示例UI代码如下:
<input class="file" type="file" id="ajaxMfile" runat="server"
onbeginupload="ajax_uploadFiles_beginUpload" onprogressupload="ajax_uploadFiles_progressUpload" onendupload="ajax_uploadFiles_endUpload"
multiple="multiple" allowtype="pptx|docx|mp3|txt|std" allowsize="500m|100m" fileindex="0" name="fileupload"
serverbuttonid="ajaxEndBtn" serverfilelistid="ajaxReturnFileName"
progresspanelid="ajaxMfileProgressPanel"
onchange="ajax_uploadFiles(this);return false" />
<asp:TextBox runat="server" Width="100%" ID="ajaxReturnFileName" style="display:none" ></asp:TextBox>
<br />
<asp:button ID="ajaxEndBtn" text="后台处理" runat="server" style="display:none" onclick="ajaxEndBtn_Click" />
<br />
<br />
<table style="display:none; color:White" id="ajaxMfileProgressPanel">
<tr>
<td >
当前文件:</td>
<td style="position:relative; padding:0px">
<asp:Label Font-Size="9pt" style="z-index:1;position:absolute;left:0px;top:-9px;" Width="300px" runat="server" ID="ajax_uploadFiles_curfilename"/>
</td>
</tr>
<tr>
<td style="position:relative; padding:0px;width:120px">
当前文件进度<asp:Label style="z-index:1;position:absolute;left:85px;top:-9px;" runat="server" Font-Size="9pt" ID="ajax_uploadFiles_upprogress"></asp:Label>
</td>
<td style="position:relative; padding:10px">
<img id="ajax_uploadFiles_curprogress" style="z-index:1;position:absolute;left:0px;top:4px;width:0px;height:12px" alt="" src="/common/Jquery/images/win7progress.jpg" />
<div id="ajax_uploadFiles_curbg" style="z-index:0;position:absolute;left:0px;top:4px;width:300px;height:12px;background-color:Gray"></div>
</td>
</tr>
<tr>
<td style="position:relative; padding:0px">
上传总量进度<asp:Label style="z-index:1;position:absolute;left:85px;top:-9px;" runat="server" Font-Size="9pt" ID="ajax_uploadFiles_cprogress"></asp:Label></td>
<td style="position:relative; padding:10px">
<img id="ajax_uploadFiles_totalprogress" style="z-index:1;position:absolute;left:0px;top:4px;width:0px;height:12px" alt="" src="/common/Jquery/images/win7progress2.jpg" />
<div id="ajax_uploadFiles_totalbg" style="z-index:0; position:absolute;left:0px;top:4px;width:300px;height:12px;background-color:Gray"></div>
</td>
</tr>
</table>
<table style="color:White; width:100%">
<tr>
<td style="position:relative">
<asp:Label runat="server" Font-Size="11pt" ID="ajax_uploadFiles_serverProcessTip"></asp:Label>
</td>
</tr>
</table>
input file 控件的一些设置如下:
(1)onbeginupload="ajax_uploadFiles_beginUpload"? ?js方法,开始上传前事件,默认值
(2)onprogressupload="ajax_uploadFiles_progressUpload"? ?js方法,上传中事件,默认值
(3)onendupload="ajax_uploadFiles_endUpload"? ? js方法,选择完文件上传事件,默认值
(4)multiple="multiple"? ? ? ? ?控件属性,允许多文件选中上传
(5)allowtype="pptx|docx|mp3|txt|std"? ? 自定义属性,允许上传的文件类型,以 | 分隔
(6)allowsize="500m|100m"? ? 自定义属性,允许上传的文件最大尺寸,可以以 | 分隔,并一一对应,如果不对应,则根据 allowtype 的设置从左至右进行匹配
? ? ? ? 如举例中的设置则表示为,pptx 允许最大 500M ,?docx 最大 100M,后面未设置则均为100M
(7)?serverbuttonid="ajaxEndBtn"? ?自定义属性,执行的服务器按钮ID,默认值?
(8)serverfilelistid="ajaxReturnFileName"? 自定义属性,服务器端返回的文件ID列表,默认值
(9)οnchange="ajax_uploadFiles(this);return false"? 自定义属性,js方法,选择文件后自动执行上传功能,默认值
根据示例代码的设置,以上部分除了 allowtype和 allowsize 均可以不用改变设置。
上传中的效果如下图:
?
本包程序实现了前面设置的界面元素方法、事件、属性的实现及对文件上传的客户端控制,示例代码如下:
?//批量上传文件的内置默认辅助方法,表示每上传一个文件之前发生的事件,
? ? ? ? ?//事件的fileObj参数代表 file对象(上传控件),由主方法自动传入,开发者可以重新指定自定义方法
? ? ? ? ?function ajax_uploadFiles_beginUpload(fileObj) {
?? ? ? ? ? ?var fIndex = parseInt(fileObj.getAttribute("fileindex"), 10);
?? ? ? ? ? ?if (fIndex == 0) {
?? ? ? ? ? ? ? ?document.getElementById('ajax_uploadFiles_serverProcessTip').innerHTML = '';
?? ? ? ? ? ? ? ?document.getElementById("ajax_uploadFiles_upprogress").innerHTML = "";
?? ? ? ? ? ? ? ?document.getElementById("ajax_uploadFiles_cprogress").innerHTML = "";
?? ? ? ? ? ? ? ?document.getElementById("ajax_uploadFiles_totalprogress").style.width = "0px";
?? ? ? ? ? ? ? ?document.getElementById(fileObj.getAttribute("serverfilelistid")).value = "";
?? ? ? ? ? ?}
?? ? ? ? ? ?document.getElementById("ajax_uploadFiles_curfilename").innerHTML = fileObj.files[fIndex].name;
?? ? ? ?}
?? ? ? ?//批量上传文件的内置默认辅助方法,表示当前正在上传文件时发生的事件(主要用于显示上传进度),
?? ? ? ?//事件的fileObj参数代表 file对象(上传控件), loaded:已经上传的文件总字节, total:正在上传的文件总字数,
? ? ? ? // percent:不超过100的整数,表示为百分比。这些参数由主方法自动传入,开发者可以重新指定自定义方法
?? ? ? ?function ajax_uploadFiles_progressUpload(fileObj, loaded, total, percent) {
?? ? ? ? ? ?document.getElementById("ajax_uploadFiles_upprogress").innerHTML = ("" + percent + "%");
?? ? ? ? ? ?var curb = parseInt(document.getElementById("ajax_uploadFiles_curbg").style.width, 10);
?? ? ? ? ? ?document.getElementById("ajax_uploadFiles_curprogress").style.width = Math.floor(curb * loaded / total) + "px";
?? ? ? ?}
?? ? ? ?//批量上传文件的内置默认辅助方法,表示当前文件上传完成时发生的事件(主要用于处理文件上传后的跟踪处理,并且返回服务器上保存的文件列到一个文本框中,以|分隔),
?? ? ? ?//事件的fileObj参数代表 file对象(上传控件), type:上传状态返回,包括success成功,error失败,?
? ? ? ? //data:文件的数据,暂时未使用, desfile:要保存在服务器上的文件名
?? ? ? ?// 这些参数由主方法自动传入,开发者可以重新指定自定义方法
?? ? ? ?function ajax_uploadFiles_endUpload(fileObj, type, data, desfile) {
?? ? ? ? ? ?var fIndex = parseInt(fileObj.getAttribute("fileindex"), 10);
?? ? ? ? ? ?var filecount = fileObj.files.length;
?? ? ? ? ? ?document.getElementById(fileObj.getAttribute("serverfilelistid")).value += desfile + "|";
?? ? ? ? ? ?var totalb = parseInt(document.getElementById("ajax_uploadFiles_totalbg").style.width, 10);
?? ? ? ? ? ?document.getElementById("ajax_uploadFiles_totalprogress").style.width = Math.floor(totalb * (fIndex + 1) / filecount) + "px";
?? ? ? ? ? ?document.getElementById("ajax_uploadFiles_cprogress").innerHTML = ("" + Math.floor(100 * (fIndex + 1) / filecount) + "%");
?? ? ? ? ? ?if (fIndex < filecount - 1) {
?? ? ? ? ? ? ? ?fIndex++;
?? ? ? ? ? ? ? ?fileObj.setAttribute("fileindex", fIndex);
?? ? ? ? ? ? ? ?ajax_uploadFiles(fileObj);
?? ? ? ? ? ? ? ?return;
?? ? ? ? ? ?}
?? ? ? ? ? ?fileObj.setAttribute("fileindex", 0);
?? ? ? ? ? ?if (type == "success") {
? ? ? ? ? ? ? ? ? ? ? ? ? ? document.getElementById('ajaxMfile').style.display='none';
?? ? ? ? ? ? ? ?document.getElementById('ajax_uploadFiles_serverProcessTip').innerHTML = '上传完成!正在进行后台处理...';
?? ? ? ? ? ? ? ?document.getElementById(fileObj.getAttribute("serverbuttonid")).click();
?? ? ? ? ? ?} else if (type == "error") {
?? ? ? ? ? ? ? ?alert("error");
?? ? ? ? ? ?}
?? ? ? ?}
?? ? ? ?//生成一个guid
?? ? ? ?function newguid() {
?? ? ? ? ? ?function S4() {
?? ? ? ? ? ? ? ?return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
?? ? ? ? ? ?}
?? ? ? ? ? ?return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
?? ? ? ?}
?? ? ? ?//批量上传文件的主方法,fileObj参数代表 file对象(上传控件)
?? ? ? ?function ajax_uploadFiles(fileObj) {
?? ? ? ? ? ?var formData = new FormData();
?? ? ? ? ? ?var fIndex = parseInt(fileObj.getAttribute("fileindex"), 10);
?? ? ? ? ? ?var filecount = fileObj.files.length;
?? ? ? ? ? ?if (filecount == 0) {
?? ? ? ? ? ? ? ?alert('请先浏览选择文件...');
?? ? ? ? ? ? ? ?return;
?? ? ? ? ? ?}
?? ? ? ? ? ?var uploadSessionId = newguid();
?? ? ? ? ? ?var upfile = fileObj.files[fIndex].name;
?? ? ? ? ? ?var dotpos = upfile.lastIndexOf('.');
?? ? ? ? ? ?var desfile = "";
?? ? ? ? ? ?var exname = "";
?? ? ? ? ? ?if (dotpos > 0) {
?? ? ? ? ? ? ? ?exname = upfile.substring(dotpos + 1, upfile.length);
?? ? ? ? ? ? ? ?desfile = uploadSessionId + upfile.substring(0, dotpos) + '.' + exname;
?? ? ? ? ? ?} else {
?? ? ? ? ? ? ? ?desfile = uploadSessionId + upfile;
?? ? ? ? ? ?}
?? ? ? ? ? ?// ? ? ? ?alert(Math.round(upsize / 1024));
?? ? ? ? ? ?if (fIndex == 0) {
?? ? ? ? ? ? ? ?var allowtype = fileObj.getAttribute("allowtype");
?? ? ? ? ? ? ? ?var allowsize = fileObj.getAttribute("allowsize");
?? ? ? ? ? ? ? ?var at = allowtype.split('|');
?? ? ? ? ? ? ? ?var as = allowsize.split('|');
?? ? ? ? ? ? ? ?for (var j = 0; j < filecount; j++) {
?? ? ? ? ? ? ? ? ? ?var validfile = fileObj.files[j].name;
?? ? ? ? ? ? ? ? ? ?var upsize = fileObj.files[j].size;
?? ? ? ? ? ? ? ? ? ?var validdotpos = validfile.lastIndexOf('.');
?? ? ? ? ? ? ? ? ? ?var validexname = "";
?? ? ? ? ? ? ? ? ? ?if (validdotpos > 0) {
?? ? ? ? ? ? ? ? ? ? ? ?validexname = validfile.substring(validdotpos + 1, validfile.length);
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?var i = 0;
?? ? ? ? ? ? ? ? ? ?if (allowtype != "") {
?? ? ? ? ? ? ? ? ? ? ? ?var find = false;
?? ? ? ? ? ? ? ? ? ? ? ?for (i = 0; i < at.length; i++) {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?if (at[i].toLowerCase() == validexname.toLowerCase()) {
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?find = true;
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?break;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ?if (find == false) {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?alert("文件" + validfile + "上传的类型不符合要求!仅允许上传扩展名为:" + allowtype.split("|").join("、") + "的文件。");
?? ? ? ? ? ? ? ? ? ? ? ? ? ?fileObj.style.display = '';
?? ? ? ? ? ? ? ? ? ? ? ? ? ?document.getElementById(fileObj.getAttribute("progresspanelid")).style.display = 'none';
?? ? ? ? ? ? ? ? ? ? ? ? ? ?var t = fileObj;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?t.outerHTML = t.outerHTML;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?return;
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?if (allowsize != "") {
?? ? ? ? ? ? ? ? ? ? ? ?if (at.length <= as.length) {
?? ? ? ? ? ? ? ? ? ? ? ?} else {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?i = 0;
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ?as[i] = as[i].toLowerCase();
?? ? ? ? ? ? ? ? ? ? ? ?var csize = parseInt(as[i]);
?? ? ? ? ? ? ? ? ? ? ? ?var tsize = upsize;
?? ? ? ? ? ? ? ? ? ? ? ?if (as[i].lastIndexOf('k') != -1) {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?csize = csize * 1024;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?tsize = Math.round(upsize / 1024) + "KB";
?? ? ? ? ? ? ? ? ? ? ? ?} else if (as[i].lastIndexOf('m') != -1) {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?csize = csize * 1024 * 1024;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?tsize = Math.round(upsize / 1024 / 1024) + "MB";
?? ? ? ? ? ? ? ? ? ? ? ?} else if (as[i].lastIndexOf('g') != -1) {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?csize = csize * 1024 * 1024 * 1024;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?tsize = Math.round(upsize / 1024 / 1024 / 1024) + "GB";
?? ? ? ? ? ? ? ? ? ? ? ?} else if (as[i].lastIndexOf('t') != -1) {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?csize = csize * 1024 * 1024 * 1024 * 1024;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?tsize = Math.round(upsize / 1024 / 1024 / 1024 / 1024) + "TB";
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ?if (upsize > csize) {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?alert("上传文件" + validfile + "的大小近" + tsize + ",系统规定大小不能超过" + as[i].toUpperCase() + ",请重新选择。");
?? ? ? ? ? ? ? ? ? ? ? ? ? ?fileObj.style.display = '';
?? ? ? ? ? ? ? ? ? ? ? ? ? ?document.getElementById(fileObj.getAttribute("progresspanelid")).style.display = 'none';
?? ? ? ? ? ? ? ? ? ? ? ? ? ?var t = fileObj;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?t.outerHTML = t.outerHTML;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?return;
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?} //j
?? ? ? ? ? ?} // findex
?? ? ? ? ? ?// ? ? ? ?document.getElementById(callObjId).disabled = 'disabled';
?? ? ? ? ? ?// ? ? ? ?if (beginFuncName != null) {
?? ? ? ? ? ?// ? ? ? ? ? ?beginFuncName(fIndex, filecount,upfile);
?? ? ? ? ? ?// ? ? ? ?}
?? ? ? ? ? ?fileObj.style.display = 'none';
?? ? ? ? ? ?document.getElementById(fileObj.getAttribute("progresspanelid")).style.display = '';
?? ? ? ? ? ?var findfunc = fileObj.getAttribute("onbeginupload");
?? ? ? ? ? ?if (eval(findfunc)) {
?? ? ? ? ? ? ? ?var execfunc = eval(findfunc);
?? ? ? ? ? ? ? ?// ? ? ? ? ? ?alert(findfunc);
?? ? ? ? ? ? ? ?execfunc(fileObj);
?? ? ? ? ? ?}
?? ? ? ? ? ?formData.append("file", fileObj.files[fIndex]); //append()里面的第一个参数file对应permission/upload里面的参数file
?? ? ? ? ? ?var processUploadUrl = window.location.protocol + "//" + window.location.host + "//common//uploadfile.ashx?guid=" + uploadSessionId;
?? ? ? ? ? ?$.ajax({
?? ? ? ? ? ? ? ?type: "post",
?? ? ? ? ? ? ? ?async: true, ?//这里要设置异步上传,才能成功调用myXhr.upload.addEventListener('progress',function(e){}),progress的回掉函数
?? ? ? ? ? ? ? ?Accept: 'text/html;charset=UTF-8',
?? ? ? ? ? ? ? ?data: formData,
?? ? ? ? ? ? ? ?contentType: "multipart/form-data",
?? ? ? ? ? ? ? ?url: processUploadUrl,
?? ? ? ? ? ? ? ?processData: false, // 告诉jQuery不要去处理发送的数据
?? ? ? ? ? ? ? ?contentType: false, // 告诉jQuery不要去设置Content-Type请求头
?? ? ? ? ? ? ? ?xhr: function () {
?? ? ? ? ? ? ? ? ? ?myXhr = $.ajaxSettings.xhr();
?? ? ? ? ? ? ? ? ? ?if (myXhr.upload) { // check if upload property exists
?? ? ? ? ? ? ? ? ? ? ? ?myXhr.upload.addEventListener('progress', function (e) {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?var loaded = e.loaded; ? ? ? ? ? ? ? ? ?//已经上传大小情况?
?? ? ? ? ? ? ? ? ? ? ? ? ? ?var total = e.total; ? ? ? ? ? ? ? ? ? ? ?//附件总大小?
?? ? ? ? ? ? ? ? ? ? ? ? ? ?var percent = Math.floor(100 * loaded / total); ? ? //已经上传的百分比 ?
?? ? ? ? ? ? ? ? ? ? ? ? ? ?// ? ? ? ? ? ? ? ? ? ? ? ?if (progressFuncName != null) {
?? ? ? ? ? ? ? ? ? ? ? ? ? ?// ? ? ? ? ? ? ? ? ? ? ? ? ? ?progressFuncName(loaded, total, percent);
?? ? ? ? ? ? ? ? ? ? ? ? ? ?// ? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ? ? ?var findfunc = fileObj.getAttribute("onprogressupload");
?? ? ? ? ? ? ? ? ? ? ? ? ? ?if (eval(findfunc)) {
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var execfunc = eval(findfunc);
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// ? ? ? ? ? ?alert(findfunc);
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?execfunc(fileObj, loaded, total, percent);
?? ? ? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ? ? ?// ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("#processBar").css("width", percent);
?? ? ? ? ? ? ? ? ? ? ? ?}, false); // for handling the progress of the upload
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?return myXhr;
?? ? ? ? ? ? ? ?},
?? ? ? ? ? ? ? ?success: function (data) {
?? ? ? ? ? ? ? ? ? ?if (fIndex == fileObj.files.length - 1) {
?? ? ? ? ? ? ? ? ? ? ? ?fileObj.style.display = '';
?? ? ? ? ? ? ? ? ? ? ? ?document.getElementById(fileObj.getAttribute("progresspanelid")).style.display = 'none';
?? ? ? ? ? ? ? ? ? ? ? ?var t = fileObj;
?? ? ? ? ? ? ? ? ? ? ? ?t.outerHTML = t.outerHTML;
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?// ? ? ? ? ? ? ? ?if (endFuncName != null) {
?? ? ? ? ? ? ? ? ? ?// ? ? ? ? ? ? ? ? ? ?endFuncName("success", data, desfile, fIndex,filecount);
?? ? ? ? ? ? ? ? ? ?// ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?var findfunc = fileObj.getAttribute("onendupload");
?? ? ? ? ? ? ? ? ? ?if (eval(findfunc)) {
?? ? ? ? ? ? ? ? ? ? ? ?var execfunc = eval(findfunc);
?? ? ? ? ? ? ? ? ? ? ? ?// ? ? ? ? ? ?alert(findfunc);
?? ? ? ? ? ? ? ? ? ? ? ?execfunc(fileObj, "success", data, desfile);
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?},
?? ? ? ? ? ? ? ?error: function (XMLHttpRequest, textStatus, errorThrown) {
?? ? ? ? ? ? ? ? ? ?alert(errorThrown);
?? ? ? ? ? ? ? ? ? ?if (endFuncName != null) {
?? ? ? ? ? ? ? ? ? ? ? ?endFuncName(fileObj, "error", null, '');
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?});
?? ? ? ?}?
ashx,一般处理程序(HttpHandler)是·NET众多web组件的一种。一个 httpHandler 接受并处理一个http请求,类似 Java 中的 servlet 。
本程序实现服务器端上传文件的接收和另存操作,在这里我们存为uploadfile.ashx,代码如下:
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.IO;
public class Handler : IHttpHandler {
? ??
? ? public void ProcessRequest (HttpContext context) {
? ? ? ? if (context.Request.Files.Count > 0)
? ? ? ? {
? ? ? ? ? ? //HttpContext.Current.Request.FilePath;
? ? ? ? ? ? string strPath = System.Web.HttpContext.Current.Server.MapPath("~/app_data/ajaxUploadFiles/");
? ? ? ? ? ? string strName = context.Request.Files[0].FileName;
? ? ? ? ? ? string ext=Path.GetExtension(strName);
? ? ? ? ? ? string filename =HttpContext.Current.Request.QueryString["guid"].ToString()+Path.GetFileNameWithoutExtension(strName);
? ? ? ? ? ? if(ext!=""){
? ? ? ? ? ? ? ? filename = filename ?+ ext;
? ? ? ? ? ? }
? ? ? ? ? ? context.Request.Files[0].SaveAs(System.IO.Path.Combine(strPath, filename));
? ? ? ? }
? ? }
?
? ? public bool IsReusable {
? ? ? ? get {
? ? ? ? ? ? return false;
? ? ? ? }
? ? }
}
在多个文件上传到服务器后,我们需要对文件进行后期处理,在前端我们设置了ID为 “ajaxEndBtn”的服务器按钮,进行模拟调用其 click 事件。
服务器端按钮处理事件示例代码如下:
void ajaxEndBtn_Click(object sender, EventArgs e)
{
//得到保存后的文件名列表
string[] upfiles = ajaxReturnFileName.Text.Split('|');
//给予用户基本的提示
ajax_uploadFiles_serverProcessTip.Text = "本次上传分析:共计上传" + (upfiles.Length - 1).ToString() + "个文件。";
//遍历上传文件列表,进行后期处理
foreach (string filename in upfiles)
{
if (filename.Trim() == "") continue;
string upfilename = Request.PhysicalApplicationPath + "app_data\\ajaxUploadFiles\\" + filename;
string exname = System.IO.Path.GetExtension(upfilename);
//执行业务处理程序
}
?
以上提供的代码仅供参考,默认的设置仅可能提供最基础的实现,比如 ashx 程序还需要进行安全控制;进度图片和UI可以重新设计;实际的业务可以根据需求对控件的属性、事件进行重写。
以上就是自己的一些分享,时间仓促,不妥之处还请大家批评指正!