昨天做了一天的ajax效果的圖片上傳，就是想讓自己學的更加的精一些，所以看了很多第三方的控制項，最後還是選擇了uploadify這個控制項，主要原因是比較容易上手。
首先我們先參考別人的資料（我自己整理了一下）
可選項
| 需要參數類型 | 參數名字 | 解釋 |
|---|---|---|
| (布爾型) | auto | 當檔案被添加到隊列時，自動上傳。 |
| (字串) | buttonImg | 瀏覽按鈕的背景圖片路徑。 |
| (字串) | buttonText | 預設在按鈕上顯示的文本。 |
| (字串) | cancelImg | 取消按鈕的背景圖片路徑。 |
| (字串) | checkScript | 用以檢查伺服器上已存在檔案的後台指令碼的路徑。【譯者註：應該是ajax方式】 |
| (字串) | displayData | 在上傳過程中顯示在隊列裡的資料類型。 |
| (字串) | expressInstall | expressInstall.swf檔案的路徑。 |
| (字串) | fileDataName | 後台指令碼中要處理的file域的名稱。【譯者註：就是type為file的input的name值】 |
| (字串) | fileDesc | 在瀏覽視窗底部的檔案類型下拉式功能表中顯示的文本。 |
| (字串) | fileExt | 允許上傳的檔案尾碼。【譯者註：.jpg/.png等】 |
| (字串) | folder | 上傳檔案夾的路徑，檔案上傳後將被儲存於此。 |
| (整型) | height | 瀏覽按鈕的高度。 |
| (布爾型) | hideButton | 設定為true將隱藏flash按鈕，這樣你就可以為下面的div元素定義樣式。 |
| (字串) | method | 向後台指令碼放送資料的表單方法。 |
| (布爾型) | multi | 設定為true將允許多檔案上傳。 |
| (字串) | queueID | 頁面中，你想要用來作為檔案隊列的元素的id。 |
| (整型) | queueSizeLimit | 上傳隊列中所允許的檔案數量。 |
| (布爾型) | removeCompleted | 設定為true將自動移除隊列中已經完成上傳的項目。 |
| (布爾型) | rollover | 設定為true將啟用瀏覽按鈕的滑鼠划過狀態。 |
| (字串) | script | 處理檔案上傳的後台指令碼的路徑。 |
| (字串) | scriptAccess | 設定在主swf檔案中的指令碼訪問模式。 |
| (JSON) | scriptData | 在檔案上傳時，應該被發送給後台指令碼的一個包含name/value索引值對以及一些額外資訊的json對象。 |
| (整型) | simUploadLimit | 允許同時上傳的檔案數量。 |
| (整型) | sizeLimit | 上傳檔案的大小限制，單位為位元組。 |
| (字串) | uploader | uploadify.swf檔案的路徑。 |
| (整型) | width | 瀏覽按鈕的寬度。 |
| (字串) | wmode | flash檔案的wmode。 |
事件
| (函數) | onAllComplete | 當上傳隊列中的所有檔案都完成上傳時觸發。 |
| (函數) | onCancel | 當從上傳隊列每移除一個檔案時觸發一次。 |
| (函數) | onCheck | 在上傳開始之前，如果檢測到一個同名檔案時觸發。 |
| (函數) | onClearQueue | 當uploadifyClearQueue()方法被調用時觸發。 |
| (函數) | onComplete | 每完成一次檔案上傳時觸發一次。 |
| (函數) | onError | 當上傳返回錯誤時觸發。 |
| (函數) | onInit | 當Uploadify執行個體被載入時觸發。 |
| (函數) | onOpen | 當上傳隊列中的一個檔案開始上傳時就觸發一次。 |
| (函數) | onProgress | 在上傳過程中觸發。 |
| (函數) | onQueueFull | 當檔案數量達到上傳隊列限制時觸發。 |
| (函數) | onSelect | 每向上傳隊列添加一個檔案時觸發。 |
| (函數) | onSelectOnce | 每向上傳隊列添加一個或一組檔案時觸發。 |
| (函數) | onSWFReady | 當flash檔案載入完成時觸發。 |
方法
| .uploadify() | 建立Uploadify上傳組件的一個執行個體。 | |
| .uploadifyCancel() | 從上傳隊列移除一個檔案。如果檔案正在上傳，該方法將先取消上傳，然後再將檔案移除出上傳隊列。 | |
| .uploadifyClearQueue() | 將所有檔案移除出上傳隊列，並且取消正在執行的所有上傳。 | |
| .uploadifySettings() | 改變Uploadify組件的選擇性參數。 | |
| .uploadifyUpload() | 觸發上傳。 |
這裡會用到一些參數，但是我們並不需要完全的掌握這些參數，用之前看看有哪些參數，倒是自己會用哪些參數就ok。
由於時間有限，我把核心的代碼先發出來，供大家參考：
在<head>標籤中先應用css樣式 <link href="../Plugin/uploadify.css" rel="stylesheet" type="text/css" />路徑這裡你的可能和我的不一樣
接著再在<head>標籤中應用js，js代碼注意先後順序，不然會報錯。
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script><script src="../Plugin/swfobject.js" type="text/javascript"></script><script src="../Plugin/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
同樣這裡路徑是改成你自己的路徑。uploaddiy是用jquery開發的，那我們就要先應用jquery才可以再使用uploaddiy所以要注意應用js的時候注意先後順序
接著是核心的html代碼
<tr><th scope="row">圖 片：</th><td> <div style="float:left;width:125px;height:35px;"> <input type="file" name="uploadify" id="uploadify" /> <%--上傳時的進度條--%> </div> <div id="fileQueue" style="float:left;height:35px;"></div> <div style="float:left;height:35px;"> <a href="javascript:$('#uploadify').uploadifyUpload()" class="btn-lit"><span>上傳</span></a> <a href="javascript:$('#uploadify').uploadifyClearQueue()" class="btn-lit"><span>取消上傳</span></a> </div></td></tr><tr> <th scope="row"> </th> <td><asp:Image ID="pic" runat="server" /></td> <%--成功上傳產生圖片預覽功能--%></tr>
寫的時候寫在form的table表中
接著我們開始完成控制項給我們需要完成的介面代碼如下：
//uploadify外掛程式的自訂設定$(document).ready(function () { $("#uploadify").uploadify({ 'uploader': '../Plugin/uploadify.swf', 'script': 'UploadImg.ashx', 'cancelImg': '../Plugin/cancel.png', 'folder': '../upload', 'buttonText': 'SELECT Pic', 'fileExt': '*.jpg;*.gif,*.png', //允許上傳的檔案格式為*.jpg,*.gif,*.png 'fileDesc': 'Web Image Files(.JPG,.GIF,.PNG)', //過濾掉除了*.jpg,*.gif,*.png的檔案 'queueID': 'fileQueue', 'sizeLimit': '2048000', //最大允許的檔案大小為2M 'auto': false, //需要手動的提交申請 'multi': false, //一次只允許上傳一張圖片 'onCancel': funCancel, //當使用者取消上傳時 'onComplete': funComplete, //完成上傳任務 'OnError': funError //上傳發生錯誤時 });});//使用者取消函數function funCancel(event, ID, fileObj, data) { jBox.tip('您取消了' + fileObj.name + '操作', 'info'); return;}//圖片上傳發生的事件function funComplete(event, ID, fileObj, response, data) { //$("#pic").html('<img id="pic" runat="server" src=../upload/' + response + '.jpg style="width:300;height:200px;"/>'); if (response == 0) { jBox.tip('圖片' + fileObj.name + '操作失敗', 'info'); return; } $("#pic").attr("src", "../upload/" + response).height(200).width(300); jBox.tip('圖片' + fileObj.name + '操作成功', 'info'); return;}//上傳發生錯誤時。function funError(event, ID, fileObj, errorObj) { jBox.tip(errorObj.info); return;}
接著我們來完成一般處理時間的檔案，代碼如下：
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 (File.Exists(uploadPath + file.FileName)) //{ // context.Response.Write("3"); //檔案已經存在 // return; //} string[] fn = file.FileName.Split('.'); string ext = fn[fn.Length - 1]; string filename = DateTime.Now.ToString("yyyyMMddhhmmss")+"."+ext; if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } file.SaveAs(uploadPath + filename); //下面這句代碼缺少的話，上傳成功後上傳隊列的顯示不會自動消失 context.Session[context.Session["userName"].ToString()] = filename; context.Response.Write(filename);}else{ context.Response.Write("0");}
成功上傳返迴文件的名字，失敗的話返回一個0，js不追傳回值，如果是0表示失敗，如果不是0則動態給img載入src。
源碼下載：http://xiazai.jb51.net/201606/yuanma/jQuery-uploadify-ajax-upload(jb51.net).rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
