jQuery無刷新上傳之uploadify3.1簡單使用
昨天在網(wǎng)上找到了一個(gè)叫做uploadify的jquery上傳插件，看到有幾篇文章也是介紹這個(gè)插件的，心想何不用這個(gè)試試。
不過網(wǎng)上的這幾篇文章用到的uploadify還是以前的舊版本uploadify-v2.1.0，我在官網(wǎng)上下載的是uploadify-v3.1版，其中的一些參數(shù)以及調(diào)用方法也不同了，還好官網(wǎng)有幫助文檔。
（唯一感覺不爽的一點(diǎn)就是這個(gè)開發(fā)包是針對php的，官網(wǎng)并沒有.NET版本，但至少原理都是一樣的，簡單的修改一下就可以了。還是那句話“不僅要知其然，還要知其所以然”，知其所以然了，一切都是浮云?。?/p>
好了，廢話不多說。先上個(gè)效果圖，有圖有真相：
一：從官網(wǎng)下載開發(fā)包添加到項(xiàng)目中，我對這個(gè)開發(fā)包做了一個(gè)精簡，刪去了那些php方面的文件：
項(xiàng)目基本結(jié)構(gòu)：
二：添加對css和js文件的引用：
注意jquery.js文件和uploadify.js文件的調(diào)用順序。
三：Default.aspx頁面的代碼如下：
<head runat="server">
<title></title>
<link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="js/uploadify/jquery.uploadify-3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#uploadify").uploadify({
//指定swf文件
'swf': 'js/uploadify/uploadify.swf',
//后臺處理的頁面
'uploader': 'UploadHandler.ashx',
//按鈕顯示的文字
'buttonText': '上傳圖片',
//顯示的高度和寬度，默認(rèn) height 30；width 120
//'height': 15,
//'width': 80,
//上傳文件的類型 默認(rèn)為所有文件 'All Files' ; '*.*'
//在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
'fileTypeDesc': 'Image Files',
//允許上傳的文件后綴
'fileTypeExts': '*.gif; *.jpg; *.png',
//發(fā)送給后臺的其他參數(shù)通過formData指定
//'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
//上傳文件頁面中，你想要用來作為文件隊(duì)列的元素的id, 默認(rèn)為false 自動生成, 不帶#
//'queueID': 'fileQueue',
//選擇文件后自動上傳
'auto': true,
//設(shè)置為true將允許多文件上傳
'multi': true
});
});
</script>
</head>
<body>
<div>
<%--用來作為文件隊(duì)列區(qū)域--%>
<div id="fileQueue">
</div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadify('upload')">上傳</a>|
<a href="javascript:$('#uploadify').uploadify('cancel')">取消上傳</a>
</p>
</div>
</body>
</html>
四：一般處理程序UploadHandler.ashx簡單代碼如下：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//http://www.cnblogs.com/babycool/
//接收上傳后的文件
HttpPostedFile file = context.Request.Files["Filedata"];
//其他參數(shù)
//string somekey = context.Request["someKey"];
//string other = context.Request["someOtherKey"];
//獲取文件的保存路徑
string uploadPath =
HttpContext.Current.Server.MapPath("UploadImages" + "\\");
//判斷上傳的文件是否為空
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
//保存文件
file.SaveAs(uploadPath + file.FileName);
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}
public bool IsReusable
{
get
{
return false;
}
}
五：用到的參數(shù)介紹：
通過查看jquery.uploadify-3.1.js中的默認(rèn)設(shè)置并參考官方文檔可得知：
參數(shù)不重新指定則保持默認(rèn)：
swf：uploadify.swf 文件的相對路徑
uploader：后臺處理程序的相對路徑
buttonText：按鈕顯示的文字
上傳文件的類型默認(rèn)為所有文件 'All Files' '*.*'
可以通過以下兩參數(shù)指定，指定方法見步驟三中的代碼：
fileTypeDesc；fileTypeExts；
auto：為true表示選擇文件后自動上傳；如果不想自動上傳，需設(shè)定為false，并通過
<a href="javascript:$('#uploadify').uploadify('upload')">上傳</a>|
<a href="javascript:$('#uploadify').uploadify('cancel')">取消上傳</a>
來指定是上傳還是取消上傳；
multi：設(shè)置為true將允許多文件上傳；
method： 提交方式Post 或Get 默認(rèn)為Post；
queueSizeLimit：當(dāng)允許多文件上傳時(shí)，設(shè)置選擇文件的個(gè)數(shù)，默認(rèn)值為999 ；
另外，取消上傳圖片的路徑是設(shè)置在css文件中的；
其他更多設(shè)置可以參考官網(wǎng)的幫助文檔。
六：將上傳完成后顯示的Complete顯示為中文
一位網(wǎng)友提出“
英文的Complete不能改成中文”，這可能是之前的版本不能進(jìn)行修改。我通過查看源代碼 jquery.uploadify-3.1.js找到了上傳完成時(shí)顯示的內(nèi)容：
再參考官方的幫助文檔，可以得知，在“
onUploadSuccess” 事件中可以設(shè)置上傳完成后所執(zhí)行的代碼，則修改后的代碼為：
//選擇文件后自動上傳
'auto': true,
//設(shè)置為true將允許多文件上傳
'multi': true,
//上傳成功后執(zhí)行
'onUploadSuccess': function (file, data, response) {
$('#' + file.id).find('.data').html(' 上傳完畢');
}
還有一個(gè)需要注意的一點(diǎn)是：一般在設(shè)定了選擇上傳文件路徑時(shí)比如只允許上傳*.jpg;*.png;*.gif格式的圖片文件，則除了指定fileTypeDesc；fileTypeExts；兩個(gè)參數(shù)外，還要在服務(wù)器端即一般處理程序中再次對上傳文件的文件擴(kuò)展名進(jìn)行判斷，以防一些用戶跳過客戶端驗(yàn)證上傳惡意文件。
下面附上我在博客園找到的那兩篇介紹uploadify的文章鏈接，供大家參考：
jQuery插件uploadify實(shí)現(xiàn)ajax效果的圖片上傳
并附上uploadify的官方網(wǎng)站
我整理的開發(fā)包：整理uploadify-v3.1.NET開發(fā)包
當(dāng)然，這僅僅是一個(gè)簡單的試用，具體用到項(xiàng)目中還要考慮很多方面的問題。
歡迎各位大神多多指教，如果該文章對你有幫助大家可以一起討論討論。
以上就是本文的全部內(nèi)容，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
- JQuery上傳插件Uploadify使用詳解及錯(cuò)誤處理
- Jquery上傳插件 uploadify v3.1使用說明
- Jquery Uploadify多文件上傳帶進(jìn)度條且傳遞自己的參數(shù)
- 詳解jquery uploadify 上傳文件
- Jquery Uploadify上傳帶進(jìn)度條的簡單實(shí)例
- jquery uploadify和apache Fileupload實(shí)現(xiàn)異步上傳文件示例
- jQuery文件上傳插件Uploadify使用指南
- php+jQuery.uploadify實(shí)現(xiàn)文件上傳教程
- firefox瀏覽器用jquery.uploadify插件上傳時(shí)報(bào)HTTP 302錯(cuò)誤
相關(guān)文章
這篇文章主要介紹了jquery實(shí)現(xiàn)的帶有索引按鈕且自動輪播切換特效，圖片簡單大方，感興趣的小伙伴可以參考下。2015-09-09
jQuery實(shí)現(xiàn)優(yōu)雅的彈窗效果（6）
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)優(yōu)雅彈窗效果 的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHei
jQuery的位置函數(shù)(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小應(yīng)用2010-03-03
jquery ajax局部加載方法詳解(實(shí)現(xiàn)代碼)
下面想就為大家?guī)硪黄猨query ajax局部加載方法詳解(實(shí)現(xiàn)代碼)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-05-05
基于jquery的二級聯(lián)動菜單實(shí)現(xiàn)代碼
基于jquery的二級聯(lián)動菜單實(shí)現(xiàn)代碼，腳本之家簡單整理了幾種。需要的朋友可以參考下，主要是思路2011-04-04
JQuery實(shí)現(xiàn)動態(tài)添加刪除評論的方法
這篇文章主要介紹了JQuery實(shí)現(xiàn)動態(tài)添加刪除評論的方法,涉及jQuery處理鼠標(biāo)事件及json數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2015-05-05
jQuery簡單創(chuàng)建節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery簡單創(chuàng)建節(jié)點(diǎn)的方法,涉及jQuery獲取節(jié)點(diǎn)及append添加元素創(chuàng)建節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡易的計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
jquery中判斷圖片是否存在的實(shí)現(xiàn)代碼
有時(shí)候我們需要判斷當(dāng)前的圖片是否存在，方便后期做一些操作，當(dāng)然也可以參考上一篇文章，如果不存在就替換位默認(rèn)圖片2023-06-06
這篇文章主要介紹了jQuery對下拉框,單選框,多選框的操作需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02