多選文件批量上傳前端(ajax*formdata)+後臺(Request.Files[i])---input+ajax原生上傳

1.配置Web.config;設定上傳文件大小

<system.web>
    <!--上傳1000M限制(https://www.cnblogs.com/Joans/p/4315411.html)-->
    <httpRuntime targetFramework="4.5.2" maxRequestLength="1024000000"/>
</system.web>
+
+
+(參考博客:(https://www.cnblogs.com/Joans/p/4315411.html))
+
+
<system.webServer>
    <security>
     <requestFiltering>
       <!--上傳1000M限制(https://www.cnblogs.com/Joans/p/4315411.html)-->
       <requestLimits maxAllowedContentLength="1024000000" /> 
      </requestFiltering>
    </security>
  </system.webServer>

2.前端(ajax*formdata)

<div>
    <form method="post"enctype="multipart/form-data" data-ajax="false">
        @*multiple="multiple"多選必備*@
        <input type="file" name="Files" id="Files" multiple="multiple" value="上傳Files" />
        <br /><br />
        @*type="button"之後用button*@
        <input type="button" value="提交Files" onclick="uplod_Files()" />
    </form>
</div>
    <script>
        function uplod_Files() {
            var formData = new FormData();//就像cookie同樣用,存入files[i];;數組形式
            var files = document.getElementById("Files").files;
            for (var i = 0; i < files.length ; i++)
            {
                formData.append("files_"+i, files[i]);
            }
            $.ajax({
                url: "/ToPdf/Get_Files",//請求地址
                dataType: "json",//數據格式
                type: "POST",//請求方式
                async: true,//是否異步請求
                cache: false,//上傳文件無需緩存
                contentType: false,//必須
                processData: false,//用於對data參數進行序列化處理 這裏必須false
                data: formData,
                success: function (data) {
                }
            })
        }
    </script>

3.後臺(Request.Files[i]

public void Get_Files()
        {
            try
            {
                var files = Request.Files;//獲得前臺ajax傳過來的formData;;是個數組,基本單位是文件,能夠不一樣類型
                for (int i = 0; i < files.Count; i++)
                {
                    var file = files[i];//數組;用indexof取
                    string file_path = Server.MapPath("Picture_File_Centre");//Picture_File_Centre人爲設置存放路徑
                    if (!Directory.Exists(file_path))
                    {
                        Directory.CreateDirectory(file_path);
                    }
                    var file_Path_Url = Path.Combine(file_path, Path.GetFileName(file.FileName));
                    file.SaveAs(file_Path_Url);//上傳後保存文件
                         //優勢;實現多類型多文件上傳;;;只要是東西就能夠上傳,,後續有要求的能夠本身在後臺或前臺作判斷
                         //缺點:file_path內覆蓋性寫入,即上傳文件與已有文件同名同類型時會覆寫
                }
            }
            catch (Exception)
            {
                throw;
            }
        }
相關文章
相關標籤/搜索