Table of contents
JavaScript inclusion sequence
Server-side upload post-processing program
need
In many application scenarios, multi-file upload is a practical function. In practical applications, the following requirements can be considered when uploading multiple files:
1. Have basic control over the type and size of uploaded files.
2. There is a progress display when uploading files, including the current file and the overall progress.
3. After uploading, some subsequent events are processed on the server side.
introduce
First, please create the COMMON directory in the root directory of the WEB application and introduce the JavaScript package. The package has been packaged and the download address is:https://download.csdn .net/download/michaelline/88615565.
After downloading successfully, unzip it to the COMMON directory. Please introduce the JS file as shown below:
In addition, we also need to create ajaxUploadFiles subdirectory in the app_data directory in order to upload and create files.
key code
Operation interface
Place a standard input file control on the interface and server it, that is, runat="server". Click Select File, and after selecting all target files, the file upload function will be automatically implemented.
The sample interface is as follows:
The sample UI code is as follows:
<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>Some settings of the input file control are as follows:
(1) onbeginupload="ajax_uploadFiles_beginUpload" js method, event before starting upload, default value
(2) onprogressupload="ajax_uploadFiles_progressUpload" js method, uploading event, default value
(3) onendupload="ajax_uploadFiles_endUpload" js method, select file upload event, default value
(4) multiple="multiple" Control attribute, allows multiple files to be selected Upload
(5) allowtype="pptx|docx|mp3|txt|std" Custom attribute, allowed file types to be uploaded, separated by |
(6) allowsize="500m|100m" Custom attribute, the maximum size of the file allowed to be uploaded, can be separated by |, and correspond one to one. If it does not correspond, it will match from left to right according to the allowtype setting.
For example, the settings in the example indicate that the PPTX allows a maximum of 500m, the maximum docx is 100m, and the latter set is 100m.
(7) serverbuttonid="ajaxEndBtn" Custom attribute, executed server button ID, default value
(8) serverfilelistid="ajaxReturnFileName" Custom attribute, file ID list returned by the server, default value
(9) οnchange="ajax_uploadFiles(this);return false" Custom attribute, js method, automatically execute the upload function after selecting the file, default value
According to the settings of the sample code, there is no need to change the settings in the above parts except allowtype and allowsize.
The effect of uploading is as follows:
JavaScript package program
This package program implements the implementation of interface element methods, events, properties and client control of file upload set previously. The sample code is as follows:
//批量上传文件的内置默认辅助方法，表示每上传一个文件之前发生的事件，
//事件的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, '');
}
}
});
}
Server-side ashx program
ashx, the general handler (HttpHandler) is one of many NET web components. An httpHandler accepts and processes an http request, similar to a servlet in Java.
This program implements the receiving and saving operations of uploaded files on the server side. Here we save them as uploadfile.ashx. The code is as follows:
<%@ 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;
}
}
}
Server-side upload post-processing program
After multiple files are uploaded to the server, we need to post-process the files. On the front end, we set a server button with an ID of "ajaxEndBtn" and simulate calling its click event.
The sample code for server-side button handling events is as follows:
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);
//执行业务处理程序
}
summary
The code provided above is for reference only. The default settings can only provide the most basic implementation. For example, the ashx program also needs security control; the progress picture and UI can be redesigned; the actual business can redesign the properties and events of the control according to needs. Write.
The above are some of my sharings. Time is short, so please criticize and correct any inaccuracies!