jQuery插件uploadify實(shí)現(xiàn)ajax效果的圖片上傳
昨天做了一天的ajax效果的圖片上傳,就是想讓自己學(xué)的更加的精一些,所以看了很多第三方的控件,最后還是選擇了uploadify這個(gè)控件,主要原因是比較容易上手。
首先我們先參考別人的資料(我自己整理了一下)
可選項(xiàng)
| 需要參數(shù)類型 | 參數(shù)名字 | 解釋 |
|---|---|---|
| (布爾型) | auto | 當(dāng)文件被添加到隊(duì)列時(shí),自動(dòng)上傳。 |
| (字符串) | buttonImg | 瀏覽按鈕的背景圖片路徑。 |
| (字符串) | buttonText | 默認(rèn)在按鈕上顯示的文本。 |
| (字符串) | cancelImg | 取消按鈕的背景圖片路徑。 |
| (字符串) | checkScript | 用以檢查服務(wù)器上已存在文件的后臺(tái)腳本的路徑?!咀g者注:應(yīng)該是ajax方式】 |
| (字符串) | displayData | 在上傳過程中顯示在隊(duì)列里的數(shù)據(jù)類型。 |
| (字符串) | expressInstall | expressInstall.swf文件的路徑。 |
| (字符串) | fileDataName | 后臺(tái)腳本中要處理的file域的名稱?!咀g者注:就是type為file的input的name值】 |
| (字符串) | fileDesc | 在瀏覽窗口底部的文件類型下拉菜單中顯示的文本。 |
| (字符串) | fileExt | 允許上傳的文件后綴?!咀g者注:.jpg/.png等】 |
| (字符串) | folder | 上傳文件夾的路徑,文件上傳后將被保存于此。 |
| (整型) | height | 瀏覽按鈕的高度。 |
| (布爾型) | hideButton | 設(shè)置為true將隱藏flash按鈕,這樣你就可以為下面的div元素定義樣式。 |
| (字符串) | method | 向后臺(tái)腳本放送數(shù)據(jù)的表單方法。 |
| (布爾型) | multi | 設(shè)置為true將允許多文件上傳。 |
| (字符串) | queueID | 頁面中,你想要用來作為文件隊(duì)列的元素的id。 |
| (整型) | queueSizeLimit | 上傳隊(duì)列中所允許的文件數(shù)量。 |
| (布爾型) | removeCompleted | 設(shè)置為true將自動(dòng)移除隊(duì)列中已經(jīng)完成上傳的項(xiàng)目。 |
| (布爾型) | rollover | 設(shè)置為true將激活瀏覽按鈕的鼠標(biāo)劃過狀態(tài)。 |
| (字符串) | script | 處理文件上傳的后臺(tái)腳本的路徑。 |
| (字符串) | scriptAccess | 設(shè)置在主swf文件中的腳本訪問模式。 |
| (JSON) | scriptData | 在文件上傳時(shí),應(yīng)該被發(fā)送給后臺(tái)腳本的一個(gè)包含name/value鍵值對(duì)以及一些額外信息的json對(duì)象。 |
| (整型) | simUploadLimit | 允許同時(shí)上傳的文件數(shù)量。 |
| (整型) | sizeLimit | 上傳文件的大小限制,單位為字節(jié)。 |
| (字符串) | uploader | uploadify.swf文件的路徑。 |
| (整型) | width | 瀏覽按鈕的寬度。 |
| (字符串) | wmode | flash文件的wmode。 |
事件
| (函數(shù)) | onAllComplete | 當(dāng)上傳隊(duì)列中的所有文件都完成上傳時(shí)觸發(fā)。 |
| (函數(shù)) | onCancel | 當(dāng)從上傳隊(duì)列每移除一個(gè)文件時(shí)觸發(fā)一次。 |
| (函數(shù)) | onCheck | 在上傳開始之前,如果檢測(cè)到一個(gè)同名文件時(shí)觸發(fā)。 |
| (函數(shù)) | onClearQueue | 當(dāng)uploadifyClearQueue()方法被調(diào)用時(shí)觸發(fā)。 |
| (函數(shù)) | onComplete | 每完成一次文件上傳時(shí)觸發(fā)一次。 |
| (函數(shù)) | onError | 當(dāng)上傳返回錯(cuò)誤時(shí)觸發(fā)。 |
| (函數(shù)) | onInit | 當(dāng)Uploadify實(shí)例被載入時(shí)觸發(fā)。 |
| (函數(shù)) | onOpen | 當(dāng)上傳隊(duì)列中的一個(gè)文件開始上傳時(shí)就觸發(fā)一次。 |
| (函數(shù)) | onProgress | 在上傳過程中觸發(fā)。 |
| (函數(shù)) | onQueueFull | 當(dāng)文件數(shù)量達(dá)到上傳隊(duì)列限制時(shí)觸發(fā)。 |
| (函數(shù)) | onSelect | 每向上傳隊(duì)列添加一個(gè)文件時(shí)觸發(fā)。 |
| (函數(shù)) | onSelectOnce | 每向上傳隊(duì)列添加一個(gè)或一組文件時(shí)觸發(fā)。 |
| (函數(shù)) | onSWFReady | 當(dāng)flash文件載入完成時(shí)觸發(fā)。 |
方法
| .uploadify() | 創(chuàng)建Uploadify上傳組件的一個(gè)實(shí)例。 | |
| .uploadifyCancel() | 從上傳隊(duì)列移除一個(gè)文件。如果文件正在上傳,該方法將先取消上傳,然后再將文件移除出上傳隊(duì)列。 | |
| .uploadifyClearQueue() | 將所有文件移除出上傳隊(duì)列,并且取消正在執(zhí)行的所有上傳。 | |
| .uploadifySettings() | 改變Uploadify組件的可選參數(shù)。 | |
| .uploadifyUpload() | 觸發(fā)上傳。 |
這里會(huì)用到一些參數(shù),但是我們并不需要完全的掌握這些參數(shù),用之前看看有哪些參數(shù),倒是自己會(huì)用哪些參數(shù)就ok。
由于時(shí)間有限,我把核心的代碼先發(fā)出來,供大家參考:
在<head>標(biāo)簽中先應(yīng)用css樣式 <link href="../Plugin/uploadify.css" rel="stylesheet" type="text/css" />路徑這里你的可能和我的不一樣
接著再在<head>標(biāo)簽中應(yīng)用js,js代碼注意先后順序,不然會(huì)報(bào)錯(cuò)。
<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開發(fā)的,那我們就要先應(yīng)用jquery才可以再使用uploaddiy所以要注意應(yīng)用js的時(shí)候注意先后順序
接著是核心的html代碼
<tr>
<th scope="row">圖 片:</th>
<td>
<div style="float:left;width:125px;height:35px;">
<input type="file" name="uploadify" id="uploadify" /> <%--上傳時(shí)的進(jìn)度條--%>
</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> <%--成功上傳生成圖片預(yù)覽功能--%>
</tr>
寫的時(shí)候?qū)懺趂orm的table表中
接著我們開始完成控件給我們需要完成的接口代碼如下:
//uploadify插件的自定義設(shè)置
$(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, //需要手動(dòng)的提交申請(qǐng)
'multi': false, //一次只允許上傳一張圖片
'onCancel': funCancel, //當(dāng)用戶取消上傳時(shí)
'onComplete': funComplete, //完成上傳任務(wù)
'OnError': funError //上傳發(fā)生錯(cuò)誤時(shí)
});
});
//用戶取消函數(shù)
function funCancel(event, ID, fileObj, data) {
jBox.tip('您取消了' + fileObj.name + '操作', 'info');
return;
}
//圖片上傳發(fā)生的事件
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;
}
//上傳發(fā)生錯(cuò)誤時(shí)。
function funError(event, ID, fileObj, errorObj) {
jBox.tip(errorObj.info);
return;
}
接著我們來完成一般處理時(shí)間的文件,代碼如下:
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"); //文件已經(jīng)存在
// 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);
//下面這句代碼缺少的話,上傳成功后上傳隊(duì)列的顯示不會(huì)自動(dòng)消失
context.Session[context.Session["userName"].ToString()] = filename;
context.Response.Write(filename);
}
else
{
context.Response.Write("0");
}
成功上傳返回文件的名字,失敗的話返回一個(gè)0,js不追返回值,如果是0表示失敗,如果不是0則動(dòng)態(tài)的給img加載src。
源碼下載:http://xiazai.jb51.net/201606/yuanma/jQuery-uploadify-ajax-upload(jb51.net).rar
相關(guān)文章
autoPlay 基于jquery的圖片自動(dòng)播放效果
效果類似這種,自動(dòng)播放,實(shí)質(zhì)控制層的顯示隱藏。需要的朋友可以參考下。2011-12-12
基于jQuery實(shí)現(xiàn)的水平和垂直居中的div窗口
在建立網(wǎng)頁布局的時(shí)候,我們經(jīng)常會(huì)面臨一個(gè)問題,就是讓一個(gè)div實(shí)現(xiàn)水平和垂直居中,雖然好幾種方式實(shí)現(xiàn),但是今天介紹時(shí)我最喜歡的方法,通過css和jQuery實(shí)現(xiàn)。2011-08-08
jquery操作HTML5 的data-*的用法實(shí)例分享
從jQuery 1.4.3起, HTML 5 data- 屬性 將自動(dòng)被引用到j(luò)Query的數(shù)據(jù)對(duì)象中。也就是說雖然 data-* 是在html5 中的元素, 但是如果使用 jquery 1.4.3庫以上的.還是可以 在非HTML5的頁面或?yàn)g覽器里, 仍然可以使用.data(obj)方法來操作"data-*" 數(shù)據(jù).2014-08-08
把jquery 的dialog和ztree結(jié)合實(shí)現(xiàn)步驟
首先準(zhǔn)備好juqury-ui、ztree 的js文件和css 文件,接下來的步驟祥看本文希望對(duì)大家有所幫助2013-08-08
jQuery當(dāng)鼠標(biāo)懸停時(shí)放大圖片的效果實(shí)例
這是一個(gè)基于jQuery的效果,當(dāng)鼠標(biāo)在小圖片上懸停時(shí),會(huì)彈出一個(gè)大圖,該大圖會(huì)跟隨鼠標(biāo)的移動(dòng)而移動(dòng)2013-07-07
IE中jquery.form中ajax提交沒反應(yīng)解決方法分享
用jquery form插件,進(jìn)行ajax提交,本來可以用,好好地,突然發(fā)現(xiàn),firefox,opera等可以提交,ie的success函數(shù)運(yùn)行了2012-09-09

