登录  /  注册
首页 > web前端 > js教程 > 正文

jquery插件uploadify使用详解

php中世界最好的语言
发布: 2018-04-23 11:30:16
原创
6408人浏览过

这次给大家带来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 &gt; 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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号