欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery插件uploadify實現(xiàn)ajax效果的圖片上傳

 更新時間:2016年06月18日 09:54:22   作者:唯吳獨尊  
本文主要介紹使用jQuery插件uploadify實現(xiàn)ajax效果的圖片上傳的功能,有需要的朋友可以參考一下。

昨天做了一天的ajax效果的圖片上傳,就是想讓自己學(xué)的更加的精一些,所以看了很多第三方的控件,最后還是選擇了uploadify這個控件,主要原因是比較容易上手。

首先我們先參考別人的資料(我自己整理了一下)

可選項

需要參數(shù)類型 參數(shù)名字 解釋
(布爾型) auto 當(dāng)文件被添加到隊列時,自動上傳。
(字符串) buttonImg 瀏覽按鈕的背景圖片路徑。
(字符串) buttonText 默認(rèn)在按鈕上顯示的文本。
(字符串) cancelImg 取消按鈕的背景圖片路徑。
(字符串) checkScript 用以檢查服務(wù)器上已存在文件的后臺腳本的路徑?!咀g者注:應(yīng)該是ajax方式】
(字符串) displayData 在上傳過程中顯示在隊列里的數(shù)據(jù)類型。
(字符串) expressInstall expressInstall.swf文件的路徑。
(字符串) fileDataName 后臺腳本中要處理的file域的名稱。【譯者注:就是type為file的input的name值】
(字符串) fileDesc 在瀏覽窗口底部的文件類型下拉菜單中顯示的文本。
(字符串) fileExt 允許上傳的文件后綴?!咀g者注:.jpg/.png等】
(字符串) folder 上傳文件夾的路徑,文件上傳后將被保存于此。
(整型) height 瀏覽按鈕的高度。
(布爾型) hideButton 設(shè)置為true將隱藏flash按鈕,這樣你就可以為下面的div元素定義樣式。
(字符串) method 向后臺腳本放送數(shù)據(jù)的表單方法。
(布爾型) multi 設(shè)置為true將允許多文件上傳。
(字符串) queueID 頁面中,你想要用來作為文件隊列的元素的id。
(整型) queueSizeLimit 上傳隊列中所允許的文件數(shù)量。
(布爾型) removeCompleted 設(shè)置為true將自動移除隊列中已經(jīng)完成上傳的項目。
(布爾型) rollover 設(shè)置為true將激活瀏覽按鈕的鼠標(biāo)劃過狀態(tài)。
(字符串) script 處理文件上傳的后臺腳本的路徑。
(字符串) scriptAccess 設(shè)置在主swf文件中的腳本訪問模式。
(JSON) scriptData 在文件上傳時,應(yīng)該被發(fā)送給后臺腳本的一個包含name/value鍵值對以及一些額外信息的json對象。
(整型) simUploadLimit 允許同時上傳的文件數(shù)量。
(整型) sizeLimit 上傳文件的大小限制,單位為字節(jié)。
(字符串) uploader uploadify.swf文件的路徑。
(整型) width 瀏覽按鈕的寬度。
(字符串) wmode flash文件的wmode。

事件

(函數(shù)) onAllComplete 當(dāng)上傳隊列中的所有文件都完成上傳時觸發(fā)。
(函數(shù)) onCancel 當(dāng)從上傳隊列每移除一個文件時觸發(fā)一次。
(函數(shù)) onCheck 在上傳開始之前,如果檢測到一個同名文件時觸發(fā)。
(函數(shù)) onClearQueue 當(dāng)uploadifyClearQueue()方法被調(diào)用時觸發(fā)。
(函數(shù)) onComplete 每完成一次文件上傳時觸發(fā)一次。
(函數(shù)) onError 當(dāng)上傳返回錯誤時觸發(fā)。
(函數(shù)) onInit 當(dāng)Uploadify實例被載入時觸發(fā)。
(函數(shù)) onOpen 當(dāng)上傳隊列中的一個文件開始上傳時就觸發(fā)一次。
(函數(shù)) onProgress 在上傳過程中觸發(fā)。
(函數(shù)) onQueueFull 當(dāng)文件數(shù)量達(dá)到上傳隊列限制時觸發(fā)。
(函數(shù)) onSelect 每向上傳隊列添加一個文件時觸發(fā)。
(函數(shù)) onSelectOnce 每向上傳隊列添加一個或一組文件時觸發(fā)。
(函數(shù)) onSWFReady 當(dāng)flash文件載入完成時觸發(fā)。

方法

.uploadify() 創(chuàng)建Uploadify上傳組件的一個實例。
.uploadifyCancel() 從上傳隊列移除一個文件。如果文件正在上傳,該方法將先取消上傳,然后再將文件移除出上傳隊列。
.uploadifyClearQueue() 將所有文件移除出上傳隊列,并且取消正在執(zhí)行的所有上傳。
.uploadifySettings() 改變Uploadify組件的可選參數(shù)。
.uploadifyUpload() 觸發(fā)上傳。

這里會用到一些參數(shù),但是我們并不需要完全的掌握這些參數(shù),用之前看看有哪些參數(shù),倒是自己會用哪些參數(shù)就ok。

由于時間有限,我把核心的代碼先發(fā)出來,供大家參考:

在<head>標(biāo)簽中先應(yīng)用css樣式   <link href="../Plugin/uploadify.css" rel="stylesheet" type="text/css" />路徑這里你的可能和我的不一樣

接著再在<head>標(biāo)簽中應(yīng)用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開發(fā)的,那我們就要先應(yīng)用jquery才可以再使用uploaddiy所以要注意應(yīng)用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">&nbsp;</th>
  <td><asp:Image ID="pic" runat="server" /></td>  <%--成功上傳生成圖片預(yù)覽功能--%>
</tr>

寫的時候?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,         //需要手動的提交申請
  'multi': false,         //一次只允許上傳一張圖片
  'onCancel': funCancel,       //當(dāng)用戶取消上傳時
  'onComplete': funComplete,      //完成上傳任務(wù)
  'OnError': funError        //上傳發(fā)生錯誤時
 });
});

//用戶取消函數(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ā)生錯誤時。
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");   //文件已經(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);
 //下面這句代碼缺少的話,上傳成功后上傳隊列的顯示不會自動消失
 context.Session[context.Session["userName"].ToString()] = filename;
  
 context.Response.Write(filename);
}
else
{
 context.Response.Write("0");
} 

成功上傳返回文件的名字,失敗的話返回一個0,js不追返回值,如果是0表示失敗,如果不是0則動態(tài)的給img加載src。

源碼下載:http://xiazai.jb51.net/201606/yuanma/jQuery-uploadify-ajax-upload(jb51.net).rar

相關(guān)文章

最新評論