Ajax+Formdata实现多文件上传，展示前端代码以及后端代码，最详细注释

本文链接：https://blog.csdn.net/qq_46035189/article/details/118964864

本篇文章就是讲述如何用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