本篇文章就是讲述如何用ajax实现多文件上传
前端是如何把文件加入到Formdata对象中
后端是如何获取到前端传来的文件
老样子,话不多说,直接上代码,注释都在代码里
前端代码
Html代码
一个上传文件的input,多文件加上这个属性 multiple="multiple"
<input type="file" id="Files" onchange='SelectFile(this,"DivFileNames","BtnFileUpload")' multiple="multiple" />
显示上传的文件名称
<div id='DivFileNames'></div>
上传到后台的按钮
<a id="BtnFileUpload" onclick="UploadFile()">
JS代码
//首先这个方法是用来显示上传的文件名称和文件大小
function SelectFile(selFile, fileQueueID, BtnUploadID) {
//获取上传的文件
var t_files = selFile.files;
//判断是否上传文件
if (t_files == undefined) {
//如果没有上传文件,就隐藏上传按钮
$(BtnUploadID).attr("style","display:none");
}
//如果上传了文件,就显示上传按钮,并显示文件名称和文件大小
else {
//声明一个变量接收生成的Html语句
var str = '';
//遍历文件集合,生成Html语句,
//我这里是生成这种语句:
//Html语句:<h6>1.测试文件上传1.txt <0.00KB></h6>
// <h6>2.测试文件上传2.txt <0.00KB></h6>
for (var i = 0, len = t_files.length; i < len; i++) {
str += '<h6>'+ (i+1) +'.' + t_files[i].name + ' <' + (t_files[i].size / 1024).toFixed(2) + 'KB></h6>';
};
//判断拼接的html语句是否为空,不为空就添加到Div中
if (str != '') {
document.getElementById(fileQueueID).innerHTML = str;
$(BtnUploadID).attr("style","display:block");
}
}
}
//这个方法ajax提交,上传文件到后台
function UploadFile() {
//获取上传的所有文件
var t_files = $("#FileInfo")[0].files;
//声明一个FormData对象
var formData = new FormData();
//遍历上传的文件,把上传的文件逐个添加到FormData对象中
for (var i = 0, len = t_files.length; i < len; i++) {
//这里需要注意的是这个key值不能一样,不然FormData只能添加第一个文件对象
//所以我这里的key值是加上了i "FileInfo"+(i+1)
formData.append("FileInfo"+(i+1), t_files[i]);
};
//提交到后台
$.ajax({
url: '../action/AjaxFileHandler.ashx?action=UpFile',//代码地址
type: 'post',
processData : false,
contentType: false,
data:formData,
dataType: 'json', //返回值类型 一般设置为json
success: function (data) //服务器成功响应处理函数
{
if (data == 1) {
alert("上傳成功!")
};
},
error: function (data)//服务器响应失败处理函数
{
alert("上傳失敗,請重新上傳!")
}
});
}
后端代码
Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/plain"
'获取前端传来的文件对象
Dim files As HttpFileCollection = context.Request.Files
'判断文件数量是否为0,如果文件数量为0直接返回0
If files.Count > 0 Then
'遍历文件对象
For Each item As String In files
'用key获取单个文件对象HttpPostedFile
Dim FileSave As HttpPostedFile = files.Get(item)
'拼接新的文件名
Dim fileName As String = DateTime.Now.ToString("yyyyMMddHHmmss")
'拼接文件存放路径
Dim filePath As String = "../UploadOrderFiles/" + fileName + FileSave.FileName
'设置文件的存放路径
Dim AbsolutePath As String = context.Server.MapPath(filePath)
Try
'执行文件保存操作
FileSave.SaveAs(AbsolutePath)
context.Response.Write(1)
Catch ex As Exception
context.Response.Write(0)
End Try
Next
Else
context.Response.Write(0)
End If
End Sub
我这里是VB的后台代码,如果是C#的话,可以直接在线上进行代码的转换
线上代码VB、C#互转网站:https://converter.telerik.com/
本人小白一个,如有不足的地方,欢迎大家互相交流学习。