程序員在開發網站的過程中，難免會遇到些文件需要上傳到服務器上面去。因此，就會藉助一些擴展控件。
下面就爲大家介紹一個上傳文件的好用控件--UploadFile
1、創建一個測試網站，取名叫：UploadDemo
2、添加UploadFile控件所需要的文件
3、添加一個名叫UploadHandler.ashx 的一般處理文件
建好後的網站結構如下：
接下來，我們就要在Default.aspx頁面添加代碼了，寫之前，需要添加UploadFile 用到的css 文件和js文件，Default.aspx 文件的完整代碼如下：
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UploadDemo._Default" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head runat="server">
- <title></title>
- <link href="uploadify/example/css/default.css" rel="stylesheet" type="text/css" />
- <link href="uploadify/uploadify.css" rel="stylesheet" type="text/css" />
- <script src="uploadify/jquery-1.3.2.min.js" type="text/javascript"></script>
- <script src="uploadify/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
- <script src="uploadify/swfobject.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("#uploadify").uploadify({
- 'uploader': 'uploadify/uploadify.swf',
- 'script': 'UploadHandler.ashx',
- 'cancelImg': 'uploadify/cancel.png',
- 'folder': 'UploadFile',
- 'queueID': 'fileQueue',
- 'sizeLimit': 2048000000,
- 'buttonText':'瀏覽...',
- 'auto': false,
- 'multi': true
- });
- });
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div id="fileQueue"></div>
- <input type="file" name="uploadify" id="uploadify" />
- <p>
- <a href="javascript:$('#uploadify').uploadifyUpload()">上傳</a>|
- <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上傳</a>
- </p>
- </form>
- </body>
- </html>
然後，我們就需要寫一般處理文件中的代碼了，代碼的功能就是做上傳處理，詳細代碼如下：
- public void Proce***equest(HttpContext context)
- {
- context.Response.ContentType = "text/plain";
- context.Response.Charset = "utf-8";
- HttpPostedFile file = context.Request.Files["Filedata"];
- string uploadPath =
- HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";
- if (file != null)
- {
- if (!Directory.Exists(uploadPath))
- {
- Directory.CreateDirectory(uploadPath);
- }
- file.SaveAs(uploadPath + file.FileName);
- //下面這句代碼缺少的話，上傳成功後上傳隊列的顯示不會自動消失
- context.Response.Write("1");
- }
- else
- {
- context.Response.Write("0");
- }
- }
最終運行的效果如下：
說到這裏，還需要強調一下的是，現在如果需要上傳文件大於4M的話，那就需要在Web.config文件中加一句話，否則，上傳的時候就會報錯，同樣，我還是把代碼貼出來
接下來，需要說明一些參數的意思以及如何使用：
uploader ： uploadify.swf 文件的相對路徑，該swf文件是一個帶有文字BROWSE的按鈕，點擊後淡出打開文件對話框，默認值：uploadify.swf。
script ： 後臺處理程序的相對路徑 。默認值：uploadify.php
checkScript ：用來判斷上傳選擇的文件在服務器是否存在的後臺處理程序的相對路徑
fileDataName ：設置一個名字，在服務器處理程序中根據該名字來取上傳文件的數據。默認爲Filedata
method ： 提交方式Post 或Get 默認爲Post
scriptAccess ：flash腳本文件的訪問模式，如果在本地測試設置爲always，默認值：sameDomain
folder ： 上傳文件存放的目錄 。
queueID ： 文件隊列的ID，該ID與存放文件隊列的div的ID一致。
queueSizeLimit ： 當允許多文件生成時，設置選擇文件的個數，默認值：999 。
multi ： 設置爲true時可以上傳多個文件。
auto ： 設置爲true當選擇文件後就直接上傳了，爲false需要點擊上傳按鈕才上傳 。
fileDesc ： 這個屬性值必須設置fileExt屬性後纔有效，用來設置選擇文件對話框中的提示文本，如設置fileDesc爲“請選擇rar doc pdf文件”，打開文件選擇框效果如下圖：
fileExt ： 設置可以選擇的文件的類型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ： 上傳文件的大小限制 。
simUploadLimit ： 允許同時上傳的個數 默認值：1 。
buttonText ： 瀏覽按鈕的文本，默認值：BROWSE 。
buttonImg ： 瀏覽按鈕的圖片的路徑 。
hideButton ： 設置爲true則隱藏瀏覽按鈕的圖片 。
rollover ： 值爲true和false，設置爲true時當鼠標移到瀏覽按鈕上時有反轉效果。
width ： 設置瀏覽按鈕的寬度 ，默認值：110。
height ： 設置瀏覽按鈕的高度 ，默認值：30。
wmode ： 設置該項爲transparent 可以使瀏覽按鈕的flash背景文件透明，並且flash文件會被置爲頁面的最高層。 默認值：opaque 。
cancelImg ：選擇文件到文件隊列中後的每一個文件上的關閉按鈕圖標，如下圖：
最後，還需要解決一個很重要的問題，那就是按鈕的中文顯示問題，依照上面的方式做出來的，如果給按鈕設置顯示文字爲中文，那麼，會遇到出現亂碼問題。因此，博主考慮到了，提供的解決辦法如下：
改變字符編碼解碼方式
既然知道亂碼是編碼解碼的原因，最好的解決方法當然是更改編碼解碼方式了。encodeURI() 方法，可以把URI字符串採用UTF-8編碼格式轉化成escape格式的字符串，而且咱們的中文也屬於UTF-8字符集裏面的，再用decodeURI()進行解碼。具體修改代碼如下：
A. jquery.uploadify.js 中的
if(settings.buttonText) data.buttonText = escape(settings.buttonText);
改爲：
if (settings.buttonText) data.buttonText = encodeURI(settings.buttonText);
B. uploadify.fla中的
browseBtn.empty.buttonText.text = unescape(param.buttonText);
改爲：browseBtn.empty.buttonText.text = decodeURI(param.buttonText);
不過本人還是比較喜歡第一種，第二種方式的話，圖片加載起來會比較緩慢；好 了！現在基本上已經完成了！去享受自己的勞動成果吧！！！！！！！！