昨天做了一天的ajax效果的圖片上傳，就是想讓自己學的更加的精一些，所以看了很多第三方的控件，最後還是選擇了uploadify這個控件，主要原因是比較容易上手。
首先我們先參考別人的資料（我自己整理了一下）
可選項
事件
(函數) 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.baidu.com/201606/yuanma/jQuery-uploadify-ajax-upload(baidu.com).rar