jquery外掛uploadify使用詳解

這次帶給大家jquery外掛uploadify使用詳解，jquery外掛uploadify使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

有時專案中需要一個檔案批次上傳功能時，個人認為uploadify是快速簡單的解決方案，分享給大家供大家參考，具體如下

先上效果圖：

具體程式碼如下：

在頁面中如下

完整頁面代碼

nbsp;html>


<meta>
 <title>文件批量上传Demo</title>
 <!--引入Jquery-->
 <script></script>
 <!--引入uploadify-->
 <script></script>
 <link>
 <script>
  $(function () {
   var guid = &#39;<%=Request["guid"] %>&#39;;
   var type = &#39;<%=Request["type"] %>&#39;;
   if (guid == null || guid == "") {
    guid = newGuid();
   }
   if (type != null) {
    type = type + &#39;/&#39;;
   }
   $(&#39;#file_upload&#39;).uploadify({
    &#39;swf&#39;: &#39;uploadify/uploadify.swf&#39;,    //FLash文件路径
    &#39;buttonText&#39;: &#39;浏 览&#39;,      //按钮文本
    &#39;uploader&#39;: &#39;uploadhandler.ashx?guid=&#39; + guid, //处理ASHX页面
    &#39;formData&#39;: { &#39;folder&#39;: &#39;picture&#39;, &#39;isCover&#39;: 1 },   //传参数
    &#39;queueID&#39;: &#39;fileQueue&#39;,      //队列的ID
    &#39;queueSizeLimit&#39;: 10,       //队列最多可上传文件数量，默认为999
    &#39;auto&#39;: false,         //选择文件后是否自动上传，默认为true
    &#39;multi&#39;: true,         //是否为多选，默认为true
    &#39;removeCompleted&#39;: true,      //是否完成后移除序列，默认为true
    &#39;fileSizeLimit&#39;: &#39;0&#39;,       //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值
    &#39;fileTypeDesc&#39;: &#39;All Files&#39;,     //文件描述
    &#39;fileTypeExts&#39;: &#39;*.*&#39;,       //上传的文件后缀过滤器
    &#39;onQueueComplete&#39;: function (queueData) {  //所有队列完成后事件
     alert("上传完毕！");
    },
    &#39;onError&#39;: function (event, queueId, fileObj, errorObj) {
     alert(errorObj.type + "：" + errorObj.info);
    },
    &#39;onUploadStart&#39;: function (file) {
    },
    &#39;onUploadSuccess&#39;: function (file, data, response) { //一个文件上传成功后的响应事件处理
     //var data = $.parseJSON(data);//如果data是json格式
     //var errMsg = "";
    }
   });
  });
  function newGuid() {
   var guid = "";
   for (var i = 1; i <= 32; i++) {
    var n = Math.floor(Math.random() * 16.0).toString(16);
    guid += n;
    if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
     guid += "-";
   }
   return guid;
  }
  //执行上传
  function doUpload() {
   $(&#39;#file_upload&#39;).uploadify(&#39;upload&#39;, &#39;*&#39;);
  }
 </script>


 

  

  

       

                      

   

    

UploadHandler.ashx程式碼：

using System;
using System.Web;
using System.IO;
public class UploadHandler : IHttpHandler {
 
 public void ProcessRequest (HttpContext context) {
  context.Response.ContentType = "text/plain";
  context.Request.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
  context.Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
  context.Response.Charset = "UTF-8";
  if (context.Request.Files.Count > 0)
  {
   #region 获取上传路径
   string uploadFolder = GetUploadFolder();
   #endregion
   if (System.IO.Directory.Exists(uploadFolder))
   {//如果上传路径存在
    HttpPostedFile file = context.Request.Files["Filedata"];
    string filePath = Path.Combine(uploadFolder, file.FileName);
    file.SaveAs(filePath);
    context.Response.Write("0");
   }
   else
   {
    context.Response.Write("2");
   }
  }
 }
 
 public bool IsReusable {
  get {
   return false;
  }
 }
 /// <summary>
 /// 返回不带后缀的文件名
 /// </summary>
 /// <param>
 /// <returns></returns>
 public static string GetFirstFileName(string fileName)
 {
  return Path.GetFileNameWithoutExtension(fileName);
 }
 /// <summary>
 /// 获取上传目录
 /// </summary>
 /// <returns></returns>
 public static string GetUploadFolder()
 {
  string rootPath = HttpContext.Current.Server.MapPath("~");
  return Path.Combine(rootPath, "test");
 }
}

檔案上傳.NET預設有大小限制，像IIS限制的30M預設請求大小。如果不想修改IIS，又想突破這個大小的限制，例如上傳1GB大小的檔案。

這是修改Web.config即可實作。

<?xml  version="1.0" encoding="utf-8"?>
<!--
 -->
<configuration>
 <system.web>
  <compilation></compilation>
  <httpruntime></httpruntime>
 </system.web>
 <!--用于设置文件上传的最大允许大小(单位：bytes)-->
 <system.webserver>
  <security>
  <requestfiltering>
   <!--修改服务器允许最大长度(1GB)-->
   <requestlimits></requestlimits>
  </requestfiltering>
  </security>
 </system.webserver>
 
</configuration>

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery讓瀏覽器互相跳轉傳遞參數使用詳解

jquery基礎點使用詳解

#

以上是jquery外掛uploadify使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！