uploadify+asp.net(C#) 批量上傳大檔案執行個體源碼

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

最近項目需求要批量上傳大檔案，項目是用asp.net(C#)開發的，uploadify上傳組件個人認為非常優秀，支援asp.net、php等，本文我們就用uploadify實現批量上傳大檔案。

效果圖：

前端代碼帶注釋說明：

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <link href="css/style.css" rel="stylesheet" type="text/css" />    <link href="uploadify/uploadify.css" rel="stylesheet" type="text/css" />    <script src="js/jquery.js" type="text/javascript"></script>    <script src="uploadify/jquery.uploadify.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $("#uploadify").uploadify({                //指定swf檔案                'swf': 'uploadify/uploadify.swf',                //幕後處理的頁面                'uploader': 'uploadfile.ashx',                //按鈕顯示的文字                'buttonText': '瀏　覽',                //上傳檔案的類型  預設為所有檔案    'All Files'  ;  '*.*'                //在瀏覽視窗底部的檔案類型下拉式功能表中顯示的文本                'fileTypeDesc': 'Image Files',                //允許上傳的檔案尾碼                'fileTypeExts': '*.gif; *.jpg; *.png;*.zip',                //發送給背景其他參數通過formData指定                //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },                //上傳檔案頁面中，你想要用來作為檔案隊列的元素的id, 預設為false  自動產生,  不帶#                //'queueID': 'fileQueue',                'fileSizeLimit': 204800000,                //選擇檔案後自動上傳                'auto': false,                //設定為true將允許多檔案上傳                'multi': true,                //上傳成功                'onUploadSuccess': function (file, data, response) {                    var obj = (new Function("return " + data))();//【json字串轉為json對象。】                    $("#rep").append("<span>" + obj.Msg + "!</span>");//data為後台返回結果。                }            });        });    </script></head><body>    <form id="form1" runat="server">        <div>            <div id="fileQueue">            </div>            <input type="file" name="uploadify" id="uploadify" />            <p>                <a href="javascript:$('#uploadify').uploadify('upload','*')">上傳</a>|             <a href="javascript:$('#uploadify').uploadify('cancel','*')">取消上傳</a>            </p>        </div>        <br />        <div id="rep">返回的結果：</div>    </form></body></html>

啟用批量上傳：

javascript:$('#uploadify').uploadify('upload','*')：啟用批量上傳。

關於大檔案上傳

在調試上傳過程中，發現大檔案（大於20M）就出現500錯誤了，伺服器配置是可以上傳500M的檔案。我就想起應該是webconfig的請求內容大小的限制問題。應該按照如下設定：

佈建要求資料大小。

<system.web>    <compilation debug="true" targetFramework="4.0" />    <!--設定大檔案請求-->    <httpRuntime maxRequestLength="1073741824" executionTimeout="3600" /></system.web>

伺服器端代碼如下：

public void ProcessRequest(HttpContext context){    context.Response.ContentType = "text/plain";    //接收上傳後的檔案    HttpPostedFile file = context.Request.Files["Filedata"];    //其他參數    //string somekey = context.Request["someKey"];    //string other = context.Request["someOtherKey"];    //擷取檔案的儲存路徑    string uploadPath =        HttpContext.Current.Server.MapPath("UploadImages" + "\\");    //判斷上傳的檔案是否為空白    if (file != null)    {        if (!Directory.Exists(uploadPath))        {            Directory.CreateDirectory(uploadPath);        }        //儲存檔案        file.SaveAs(uploadPath + DateTime.Now.ToString("yyyyMMddHHmmsss") + file.FileName.Substring(file.FileName.LastIndexOf(".") - 1));        ResponseModel rm = new ResponseModel();        rm.Id = 1;        rm.state = 0;        rm.Msg = "成功";        context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(rm));//即傳給前台的data    }    else    {        context.Response.Write("0"); //即傳給前台的data    }}public class ResponseModel{    public int Id { get; set; }    public int state { get; set; }    public string Msg { get; set; }}

其中上傳成功後的返回對象可採用json序列化。然後返回給用戶端調用。而在用戶端調用的時候，建議先給返回的json字串轉換為json對象，這樣可以方便使用。

如何處理上傳結果返回的資料：

var obj = (new Function("return " + data))();//data為返回的json字串

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More