昨天做了一天的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。
晚點我講整理出核心的代碼供大家下載。敬請關注本貼。
點擊此處
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
