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

jQuery無刷新上傳之uploadify3.1簡單使用

 更新時間:2016年06月18日 10:09:51   作者:酷小孩  
本文主要介紹jQuery插件uploadify3.1的簡單使用,希望能幫到大家,有需要的朋友可以參考一下。

昨天在網(wǎng)上找到了一個叫做uploadify的jquery上傳插件,看到有幾篇文章也是介紹這個插件的,心想何不用這個試試。

不過網(wǎng)上的這幾篇文章用到的uploadify還是以前的舊版本uploadify-v2.1.0,我在官網(wǎng)上下載的是uploadify-v3.1版,其中的一些參數(shù)以及調(diào)用方法也不同了,還好官網(wǎng)有幫助文檔。

(唯一感覺不爽的一點就是這個開發(fā)包是針對php的,官網(wǎng)并沒有.NET版本,但至少原理都是一樣的,簡單的修改一下就可以了。還是那句話“不僅要知其然,還要知其所以然”,知其所以然了,一切都是浮云?。?/p>

好了,廢話不多說。先上個效果圖,有圖有真相:

http://img.jbzj.com/file_images/article/201606/201606181000421.jpg

一:從官網(wǎng)下載開發(fā)包添加到項目中,我對這個開發(fā)包做了一個精簡,刪去了那些php方面的文件:

http://img.jbzj.com/file_images/article/201606/201606181000422.jpg

項目基本結(jié)構(gòu):

http://img.jbzj.com/file_images/article/201606/201606181000423.jpg

二:添加對css和js文件的引用:

http://img.jbzj.com/file_images/article/201606/201606181000424.jpg

注意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': '上傳圖片',
    //顯示的高度和寬度,默認 height 30;width 120
    //'height': 15,
    //'width': 80,
    //上傳文件的類型 默認為所有文件 'All Files' ; '*.*'
    //在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
    'fileTypeDesc': 'Image Files',
    //允許上傳的文件后綴
    'fileTypeExts': '*.gif; *.jpg; *.png',
    //發(fā)送給后臺的其他參數(shù)通過formData指定
    //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
    //上傳文件頁面中,你想要用來作為文件隊列的元素的id, 默認為false 自動生成, 不帶#
    //'queueID': 'fileQueue',
    //選擇文件后自動上傳
    'auto': true,
    //設(shè)置為true將允許多文件上傳
    'multi': true
   });
  });
 
 </script>
</head>
<body>
 <div>
  <%--用來作為文件隊列區(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中的默認設(shè)置并參考官方文檔可得知:

http://img.jbzj.com/file_images/article/201606/201606181000425.jpg

參數(shù)不重新指定則保持默認:

swf:uploadify.swf 文件的相對路徑

uploader:后臺處理程序的相對路徑

buttonText:按鈕顯示的文字

上傳文件的類型默認為所有文件  '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 默認為Post;

queueSizeLimit:當(dāng)允許多文件上傳時,設(shè)置選擇文件的個數(shù),默認值為999 ;

另外,取消上傳圖片的路徑是設(shè)置在css文件中的;

其他更多設(shè)置可以參考官網(wǎng)的幫助文檔。

六:將上傳完成后顯示的Complete顯示為中文

一位網(wǎng)友提出“
英文的Complete不能改成中文”,這可能是之前的版本不能進行修改。我通過查看源代碼 jquery.uploadify-3.1.js找到了上傳完成時顯示的內(nèi)容:

 http://img.jbzj.com/file_images/article/201606/201606181000426.jpg

再參考官方的幫助文檔,可以得知,在“
onUploadSuccess” 事件中可以設(shè)置上傳完成后所執(zhí)行的代碼,則修改后的代碼為:

http://img.jbzj.com/file_images/article/201606/201606181000427.jpg

//選擇文件后自動上傳
'auto': true,
//設(shè)置為true將允許多文件上傳
'multi': true,
//上傳成功后執(zhí)行
'onUploadSuccess': function (file, data, response) {
 $('#' + file.id).find('.data').html(' 上傳完畢');
} 

還有一個需要注意的一點是:一般在設(shè)定了選擇上傳文件路徑時比如只允許上傳*.jpg;*.png;*.gif格式的圖片文件,則除了指定fileTypeDesc;fileTypeExts;兩個參數(shù)外,還要在服務(wù)器端即一般處理程序中再次對上傳文件的文件擴展名進行判斷,以防一些用戶跳過客戶端驗證上傳惡意文件。

下面附上我在博客園找到的那兩篇介紹uploadify的文章鏈接,供大家參考:

Jquery uploadify上傳插件使用詳解 

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

并附上uploadify的官方網(wǎng)站

我整理的開發(fā)包:整理uploadify-v3.1.NET開發(fā)包

當(dāng)然,這僅僅是一個簡單的試用,具體用到項目中還要考慮很多方面的問題。

歡迎各位大神多多指教,如果該文章對你有幫助大家可以一起討論討論。

以上就是本文的全部內(nèi)容,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論