前言
現在網上文件上傳組件隨便一搜都是一大堆，不過看大家一般都在用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錯誤了。我就想起應該是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字符串
希望本文可以給您帶來幫助！