`
huaxiafu
  • 浏览: 8510 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

JQuery上传插件Uploadify并传参数

js 
阅读更多

JQuery上传插件Uploadify并传参数（一）

jQueryServletJavaScriptApacheCSS

Uploadify是JQuery的一个上传插件，实现的效果非常不错，进度显示或者速度显示都可以!

 

 

同时。。我已经使用最新版写了个。大家可以看这么的这个。。

  

文章: JQuery上传插件Uploadify并传参数（二）

链接: http://yangpanwww.iteye.com/blog/1550508

 

 

也可以去看看官网上面的 dome  下载包...API  等

 

下面是我开发过程遇到的一些问题总结：

 1、上传失败 IO ERROR    ------测试是否是 servlet 等配置或者关注flash的版本

 2、前台传参中文乱码  -----------这个要根据应用服务器不同可能不同吧...反正只要我们的 界面、界面传参以及后台接收的编码设置一致应该就没上面问题..反正这个问题好解决的...

 3、批量上传的时候，只有第一个附件上传的时候可以接收到前台传来的name参数，而后面的参数都为null-------设置'simUploadLimit' : 1, // 一次同步上传的文件数目为 1，问题解决...当初这个问题可是难了我好久！fuck

 

嘿嘿....下面我贴出代码 

 

 jsp:

 

Html代码  收藏代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>  
  2. <%  
  3.     String path = request.getContextPath();   
  4. %>  
  5.   
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  7. <html>  
  8.     <head>   
  9.         <title>QQ:609865047  ---  妞见妞爱</title>  
  10.         <meta http-equiv="pragma" content="no-cache">  
  11.         <meta http-equiv="cache-control" content="no-cache">  
  12.         <meta http-equiv="expires" content="0">  
  13.     </head>  
  14.   
  15.     <body>   
  16.         <link href="js/uploadify.css" rel="stylesheet" type="text/css" />  
  17.         <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  
  18.         <script type="text/javascript" src="js/swfobject.js"></script>  
  19.         <script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>  
  20.         <script type="text/javascript">  
  21.          $(document).ready(function() {  
  22.           $("#uploadify").uploadify({  
  23.            'uploader'       : 'js/uploadify.swf',  
  24.            'script'         : 'scripts/uploadify',//servlet的路径或者.jsp 这是访问servlet 'scripts/uploadif'   
  25.            'method'         :'GET',  //如果要传参数，就必须改为GET  
  26.            'cancelImg'      : 'js/cancel.png',  
  27.            'folder'         : 'uploads', //要上传到的服务器路径，  
  28.            'queueID'        : 'fileQueue',  
  29.            'auto'           : false, //选定文件后是否自动上传，默认false  
  30.            'multi'          : true, //是否允许同时上传多文件，默认false  
  31.            'simUploadLimit' : 1, //一次同步上传的文件数目    
  32.            'sizeLimit'      : 19871202, //设置单个文件大小限制，单位为byte    
  33.            'queueSizeLimit' : 5, //限制在一次队列中的次数（可选定几个文件）。默认值= 999，而一次可传几个文件有 simUploadLimit属性决定。  
  34.            'fileDesc'       : '支持格式:jpg或gif', //如果配置了以下的'fileExt'属性，那么这个属性是必须的    
  35.            'fileExt'        : '*.jpg;*.gif',//允许的格式  
  36.            'scriptData'     :{'name':$('#name').val()}, // 多个参数用逗号隔开 'name':$('#name').val(),'num':$('#num').val(),'ttl':$('#ttl').val()  
  37.            　onComplete: function (event, queueID, fileObj, response, data) {  
  38.             var value = response ;  
  39.            　   alert("文件:" + fileObj.name + "上传成功");  
  40.            　},    
  41.            　onError: function(event, queueID, fileObj) {    
  42.            　 alert("文件:" + fileObj.name + "上传失败");    
  43.            　},    
  44.            　onCancel: function(event, queueID, fileObj){    
  45.            　 alert("取消了" + fileObj.name);    
  46.            　　　}   
  47.           });  
  48.          });  
  49.            
  50.            
  51.          function uploasFile(){   
  52.               //校验  
  53.               var name=document.getElementById("name").value;   
  54.               if(name.replace(/\s/g,'') == ''){  
  55.                     alert("名称不能为空！");  
  56.                     return false;  
  57.               }    
  58.               //设置 scriptData 的参数  
  59.               $('#uploadify').uploadifySettings('scriptData',{'name':$('#name').val()});  
  60.               //上传  
  61.               jQuery('#uploadify').uploadifyUpload()               
  62.          }  
  63.             
  64.            
  65.  </script>  
  66.          名称:<input type="text" id="name" name="name" value="妞见妞爱" >  
  67.         <div id="fileQueue"></div>   
  68.         <input type="file" name="uploadify" id="uploadify" />  
  69.         <p>  
  70.             <a href="javascript:uploasFile()">开始上传</a>&nbsp;  
  71.             <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>  
  72.         </p>  
  73.     </body>  
  74. </html>  

  

 

 

 Uploadify.java

 

  

Java代码  收藏代码
  1. package com;  
  2.   
  3. import java.io.BufferedInputStream;  
  4. import java.io.BufferedOutputStream;  
  5. import java.io.File;  
  6. import java.io.FileOutputStream;  
  7. import java.io.IOException;  
  8. import java.text.SimpleDateFormat;  
  9. import java.util.Date;  
  10. import java.util.Iterator;  
  11. import java.util.List;  
  12.   
  13. import javax.servlet.ServletException;  
  14. import javax.servlet.http.HttpServlet;  
  15. import javax.servlet.http.HttpServletRequest;  
  16. import javax.servlet.http.HttpServletResponse;  
  17.   
  18. import org.apache.commons.fileupload.FileItem;  
  19. import org.apache.commons.fileupload.FileUploadException;  
  20. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
  21. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
  22. import org.apache.commons.fileupload.util.Streams;  
  23.    
  24.   
  25. public class Uploadify extends HttpServlet {  
  26.        
  27.     private static final long serialVersionUID = 1L;  
  28.   
  29.     /** 
  30.      * 实现多文件的同时上传 
  31.      */   
  32.     public void doGet(HttpServletRequest request,  
  33.             HttpServletResponse response) throws ServletException, IOException {  
  34.           
  35.         //设置接收的编码格式  
  36.         request.setCharacterEncoding("UTF-8");  
  37.         Date date = new Date();//获取当前时间  
  38.         SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");  
  39.         SimpleDateFormat sdfFolder = new SimpleDateFormat("yyMM");  
  40.         String newfileName = sdfFileName.format(date);//文件名称  
  41.         String fileRealPath = "";//文件存放真实地址  
  42.           
  43.         String fileRealResistPath = "";//文件存放真实相对路径  
  44.           
  45.         //名称  界面编码 必须 和request 保存一致..否则乱码  
  46.         String name = request.getParameter("name");  
  47.               
  48.            
  49.         String firstFileName="";  
  50.         // 获得容器中上传文件夹所在的物理路径  
  51.         String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "uploads\\" + newfileName +"\\";  
  52.         System.out.println("路径" + savePath);  
  53.         File file = new File(savePath);  
  54.         if (!file.isDirectory()) {  
  55.             file.mkdir();  
  56.         }  
  57.   
  58.         try {  
  59.             DiskFileItemFactory fac = new DiskFileItemFactory();  
  60.             ServletFileUpload upload = new ServletFileUpload(fac);  
  61.             upload.setHeaderEncoding("UTF-8");  
  62.             // 获取多个上传文件  
  63.             List fileList = fileList = upload.parseRequest(request);  
  64.             // 遍历上传文件写入磁盘  
  65.             Iterator it = fileList.iterator();  
  66.             while (it.hasNext()) {  
  67.                 FileItem item = (FileItem) it.next();  
  68.                   
  69.                 // 如果item是文件上传表单域     
  70.                 // 获得文件名及路径     
  71.                 String fileName = item.getName();  
  72.                 if (fileName != null) {  
  73.                     firstFileName=item.getName().substring(item.getName().lastIndexOf("\\")+1);  
  74.                     String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));//获取文件后缀名  
  75.                     fileRealPath = savePath + newfileName+ formatName;//文件存放真实地址  
  76.                       
  77.                     BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流  
  78.                     BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流  
  79.                     Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹  
  80.                     //上传成功，则插入数据库  
  81.                     if (new File(fileRealPath).exists()) {  
  82.                         //虚拟路径赋值  
  83.                         fileRealResistPath=sdfFolder.format(date)+"/"+fileRealPath.substring(fileRealPath.lastIndexOf("\\")+1);  
  84.                         //保存到数据库  
  85.                         System.out.println("保存到数据库:");  
  86.                         System.out.println("name:"+name);  
  87.                         System.out.println("虚拟路径:"+fileRealResistPath);  
  88.                     }  
  89.                        
  90.                 }   
  91.             }   
  92.         } catch (FileUploadException ex) {  
  93.             ex.printStackTrace();  
  94.             System.out.println("没有上传文件");  
  95.             return;  
  96.        }   
  97.        response.getWriter().write("1");  
  98.           
  99.     }  
  100.    
  101.     public void doPost(HttpServletRequest req, HttpServletResponse resp)  
  102.             throws ServletException, IOException {  
  103.         doGet(req, resp);  
  104.     }  
  105. }  

 

web.xml

 

 

Xml代码  收藏代码
  1. <servlet>  
  2.  <servlet-name>Uploadify</servlet-name>  
  3.  <servlet-class>com.Uploadify</servlet-class>  
  4. </servlet>  
  5. <servlet-mapping>  
  6.  <servlet-name>Uploadify</servlet-name>  
  7.  <url-pattern>/scripts/uploadify</url-pattern>  
  8. </servlet-mapping>  

 

  效果图片看及 dome 见附件~~~~~~~~~~~

 

   

  我也是根据 dada_fangfang 大哥 http://dada-fangfang.iteye.com/blog/865177 文章改进来的....

  这边有 struts 和 springmvc 的写法...但是..他那边就纯粹的上传文件...如果还需要传参数的话！

 

 我的这篇就 希望对大家有所帮助！

 

 效果图：

图1：

图2：
 

 

   

JQuery批量上传插件Uploadify并传参数（二）

jQueryfileuploadJavaScriptuploadify中文乱码 

Uploadify是一个Jquery框架下处理批量文件上传的插件，支持多种服务器端软件。

 

官网：http://www.uploadify.com/

文档：http://www.uploadify.com/documentation/

 

今天根据文档写了个批量上传的的功能..

 

下面直接进入主题：

 

界面效果：

 



 

 界面代码：

 

Html代码  收藏代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4. %>  
  5.   
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  7. <html>  
  8.     <head>  
  9.   
  10.         <title>Uploadify上传</title>  
  11.         <meta http-equiv="pragma" content="no-cache">  
  12.         <meta http-equiv="cache-control" content="no-cache">  
  13.         <meta http-equiv="expires" content="0">  
  14.         <link rel="stylesheet" href="uploadify/uploadify.css" type="text/css"></link>  
  15.         <script type="text/javascript" src="uploadify/jquery-1.7.2.min.js"></script>  
  16.         <script type="text/javascript"  
  17.             src="uploadify/jquery.uploadify-3.1.min.js"></script>  
  18.         <script type="text/javascript">  
  19.                 
  20.             $(function() {  
  21.                 $("#file_upload").uploadify({  
  22.                     'height'        : 27,   
  23.                     'width'         : 80,    
  24.                     'buttonText'    : '浏 览',  
  25.                     'swf'           : '<%=path%>/uploadify/uploadify.swf',  
  26.                     'uploader'      : '<%=path%>/servlet/UploadifySerlet',  
  27.                     'auto'          : false,  
  28.                     'fileTypeExts'  : '*.xls',  
  29.                     'formData'      : {'userName':'','qq':''},  
  30.                     'onUploadStart' : function(file) {  
  31.                            
  32.                         //校验     
  33.                         var name=$('#userName').val();      
  34.                          if(name.replace(/\s/g,'') == ''){     
  35.                               alert("名称不能为空！");     
  36.                               return false;     
  37.                          }   
  38.                            
  39.                          //校验     
  40.                         var qq=$('#qq').val();      
  41.                          if(qq.replace(/\s/g,'') == ''){     
  42.                               alert("QQ不能为空！");     
  43.                               return false;     
  44.                          }  
  45.                            
  46.                         $("#file_upload").uploadify("settings", "formData", {'userName':name,'qq':qq});  
  47.                         //$("#file_upload").uploadify("settings", "qq", );  
  48.                     }  
  49.                 });  
  50.             });  
  51.           
  52.     </script>  
  53.     </head>  
  54.   
  55.     <body>  
  56.   
  57.         名称: <input type="text" id="userName" name="userName" value="妞见妞爱">  
  58.         <br>  
  59.          QQ: <input type="text" id="qq" name="qq" value="609865047">  
  60.         <br>  
  61.         <input type="file" name="uploadify" id="file_upload" />  
  62.         <hr>  
  63.         <a href="javascript:$('#file_upload').uploadify('upload','*')">开始上传</a>&nbsp;     
  64.         <a href="javascript:$('#file_upload').uploadify('cancel', '*')">取消所有上传</a>   
  65.     </body>  
  66. </html>  

 

  关于各个参数的介绍，网上也有很多。。我们也可以在 jquery.uploadify-3.1.js 中找到。

 

Js代码  收藏代码
  1. var settings = $.extend({  
  2.                     // Required Settings  
  3.                     id       : $this.attr('id'), // The ID of the DOM object  
  4.                     swf      : 'uploadify.swf',  // The path to the uploadify SWF file  
  5.                     uploader : 'uploadify.php',  // The path to the server-side upload script  
  6.                       
  7.                     // Options  
  8.                     auto            : true,               // Automatically upload files when added to the queue  
  9.                     buttonClass     : '',                 // A class name to add to the browse button DOM object  
  10.                     buttonCursor    : 'hand',             // The cursor to use with the browse button  
  11.                     buttonImage     : null,               // (String or null) The path to an image to use for the Flash browse button if not using CSS to style the button  
  12.                     buttonText      : 'SELECT FILES',     // The text to use for the browse button  
  13.                     checkExisting   : false,              // The path to a server-side script that checks for existing files on the server  
  14.                     debug           : false,              // Turn on swfUpload debugging mode  
  15.                     fileObjName     : 'Filedata',         // The name of the file object to use in your server-side script  
  16.                     fileSizeLimit   : 0,                  // The maximum size of an uploadable file in KB (Accepts units B KB MB GB if string, 0 for no limit)  
  17.                     fileTypeDesc    : 'All Files',        // The description for file types in the browse dialog  
  18.                     fileTypeExts    : '*.*',              // Allowed extensions in the browse dialog (server-side validation should also be used)  
  19.                     height          : 30,                 // The height of the browse button  
  20.                     method          : 'post',             // The method to use when sending files to the server-side upload script  
  21.                     multi           : true,               // Allow multiple file selection in the browse dialog  
  22.                     formData        : {},                 // An object with additional data to send to the server-side upload script with every file upload  
  23.                     preventCaching  : true,               // Adds a random value to the Flash URL to prevent caching of it (conflicts with existing parameters)  
  24.                     progressData    : 'percentage',       // ('percentage' or 'speed') Data to show in the queue item during a file upload  
  25.                     queueID         : false,              // The ID of the DOM object to use as a file queue (without the #)  
  26.                     queueSizeLimit  : 999,                // The maximum number of files that can be in the queue at one time  
  27.                     removeCompleted : true,               // Remove queue items from the queue when they are done uploading  
  28.                     removeTimeout   : 3,                  // The delay in seconds before removing a queue item if removeCompleted is set to true  
  29.                     requeueErrors   : false,              // Keep errored files in the queue and keep trying to upload them  
  30.                     successTimeout  : 30,                 // The number of seconds to wait for Flash to detect the server's response after the file has finished uploading  
  31.                     uploadLimit     : 0,                  // The maximum number of files you can upload  
  32.                     width           : 120,                // The width of the browse button  
  33.                       

 

 上面是默认的设置。。。

 

  服务器端代码：

 

Java代码  收藏代码
  1. package com.yangpan.uploadify;  
  2.   
  3. import java.io.File;  
  4. import java.io.FileOutputStream;  
  5. import java.io.IOException;  
  6. import java.io.InputStream;  
  7. import java.io.OutputStream;  
  8. import java.io.PrintWriter;  
  9. import java.text.SimpleDateFormat;  
  10. import java.util.Arrays;  
  11. import java.util.Date;  
  12. import java.util.Iterator;  
  13. import java.util.List;  
  14. import java.util.Random;  
  15.   
  16. import javax.servlet.ServletException;  
  17. import javax.servlet.http.HttpServlet;  
  18. import javax.servlet.http.HttpServletRequest;  
  19. import javax.servlet.http.HttpServletResponse;  
  20.   
  21. import org.apache.commons.fileupload.FileItem;  
  22. import org.apache.commons.fileupload.FileUploadException;  
  23. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
  24. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
  25.   
  26. public class UploadifySerlet extends HttpServlet {  
  27.   
  28.     /** 
  29.      *  
  30.      */  
  31.     private static final long serialVersionUID = 1L;  
  32.   
  33.     //上传文件的保存路径  
  34.     protected String configPath = "attached/";  
  35.   
  36.     protected String dirTemp = "attached/temp/";  
  37.       
  38.     protected String dirName = "file";  
  39.       
  40.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  41.             throws ServletException, IOException {  
  42.          this.doPost(request, response);  
  43.     }  
  44.   
  45.        
  46.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  47.             throws ServletException, IOException {  
  48.           
  49.         request.setCharacterEncoding("UTF-8");  
  50.         response.setContentType("text/html; charset=UTF-8");  
  51.         PrintWriter out = response.getWriter();  
  52.           
  53.         //文件保存目录路径  
  54.         String savePath = this.getServletContext().getRealPath("/") + configPath;  
  55.           
  56.         // 临时文件目录   
  57.         String tempPath = this.getServletContext().getRealPath("/") + dirTemp;  
  58.           
  59.         SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");  
  60.         String ymd = sdf.format(new Date());  
  61.         savePath += "/" + ymd + "/";  
  62.         //创建文件夹  
  63.         File dirFile = new File(savePath);  
  64.         if (!dirFile.exists()) {  
  65.             dirFile.mkdirs();  
  66.         }  
  67.           
  68.         tempPath += "/" + ymd + "/";  
  69.         //创建临时文件夹  
  70.         File dirTempFile = new File(tempPath);  
  71.         if (!dirTempFile.exists()) {  
  72.             dirTempFile.mkdirs();  
  73.         }  
  74.           
  75.         DiskFileItemFactory  factory = new DiskFileItemFactory();  
  76.         factory.setSizeThreshold(20 * 1024 * 1024); //设定使用内存超过5M时，将产生临时文件并存储于临时目录中。     
  77.         factory.setRepository(new File(tempPath)); //设定存储临时文件的目录。     
  78.   
  79.         ServletFileUpload upload = new ServletFileUpload(factory);  
  80.         upload.setHeaderEncoding("UTF-8");  
  81.           
  82.           
  83.            
  84.         try {  
  85.             List items = upload.parseRequest(request);  
  86.             Iterator itr = items.iterator();  
  87.               
  88.             String name = "";  
  89.             String qq = "";  
  90.               
  91.             while (itr.hasNext()) {  
  92.                 FileItem item = (FileItem) itr.next();  
  93.                 String fileName = item.getName();  
  94.                 long fileSize = item.getSize();  
  95.                 if (!item.isFormField()) {  
  96.                     String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();  
  97.                       
  98.                     SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");  
  99.                     String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;  
  100.                     try{  
  101.                         File uploadedFile = new File(savePath, newFileName);  
  102.                           
  103.                         /* 
  104.                          * 第一种方法 
  105.                          *  
  106.                          * 好处： 一目了然..简单啊... 
  107.                          * 弊端： 这种方法会导致上传的文件大小比原来的文件要大 
  108.                          *  
  109.                          * 推荐使用第二种 
  110.                          */  
  111.                         //item.write(uploadedFile);  
  112.                         //--------------------------------------------------------------------  
  113.                         //第二种方法  
  114.                         OutputStream os = new FileOutputStream(uploadedFile);  
  115.                         InputStream is = item.getInputStream();  
  116.                         byte buf[] = new byte[1024];//可以修改 1024 以提高读取速度  
  117.                         int length = 0;    
  118.                         while( (length = is.read(buf)) > 0 ){    
  119.                             os.write(buf, 0, length);    
  120.                         }    
  121.                         //关闭流    
  122.                         os.flush();  
  123.                         os.close();    
  124.                         is.close();    
  125.                         System.out.println("上传成功！路径："+savePath+"/"+newFileName);  
  126.                         out.print("1");  
  127.                     }catch(Exception e){  
  128.                         e.printStackTrace();  
  129.                     }  
  130.                 }else {  
  131.                     String filedName = item.getFieldName();  
  132.                     if (filedName.equals("userName")) {  
  133.                         name = item.getString();  
  134.                     }else {  
  135.                         qq = item.getString();  
  136.                     }  
  137.                     System.out.println("FieldName："+filedName);  
  138.                     System.out.println("String："+item.getString("UTF-8"));//避免中文乱码  
  139.                     //System.out.println("String()："+item.getString(item.getName()));  
  140.                     System.out.println("===============");   
  141.                 }             
  142.             }   
  143.               
  144.         } catch (FileUploadException e) {  
  145.             // TODO Auto-generated catch block  
  146.             e.printStackTrace();  
  147.         }  
  148.         out.flush();  
  149.         out.close();  
  150.     }  
  151.   
  152. }  

 

 

  WEB.XML

 

Xml代码  收藏代码
  1. <servlet>  
  2.         <servlet-name>UploadifySerlet</servlet-name>  
  3.         <servlet-class>  
  4.             com.yangpan.uploadify.UploadifySerlet  
  5.         </servlet-class>  
  6.     </servlet>  
  7.   
  8.     <servlet-mapping>  
  9.         <servlet-name>UploadifySerlet</servlet-name>  
  10.         <url-pattern>/servlet/UploadifySerlet</url-pattern>  
  11.     </servlet-mapping>  

 

 

 

基本设置

swf：主要Flash文件路径，默认uploadify.swf，如果同调用文件在同一不目录下可以忽略

uploader：后台处理程序路径，默认uploadify.php

postData：传递参数，默认{}

auto：是否允许自动上传文件，默认false

method：传递参数方式，默认post

 

外观设置

width：按钮宽度，默认120

height：按钮高度，默认30

buttonClass：按钮样式设置，如：样式为.btnClass{color:red;}

buttonCursor：鼠标移入时指针样式，默认hand，（注：设置后不知道怎么显示）

buttonImage：按钮显示图片地址，默认false，（注：必须是高度2倍，包含两个按钮图片，上默认、下鼠标移入，IE9）

buttonText：按钮显示文字信息，默认SELECT FILES，（注：3.0.0版本支持中文）

cancelImage：取消选中文件图片，默认uploadify-cancel.png

fileTypeDesc：选择文件时文件类型提示，默认All Files (*.*)

fileTypeExts：选择文件时文件类型限制，默认*.*，（注：如果fileTypeDesc和fileTypeExts同时设置，则显示组合，如：All Files (*.*) (*.*)

多个类型如：“*.JPG;*.GIF;*.PNG;*.BMP”）

 

操作设置

queueID：上传队列容器ID，默认false

removeCompleted：是否删除容器内已经上传完毕文件，默认true

removeTimeout：删除容器内已经上传完毕文件延迟时间，单位s，默认3

fileSizeLimit：设置允许上传文件大小，单位k，默认0不限制

multi：是否支持多文件同时上传，默认false

queueSizeLimit：限制一次上传文件个数，即容器内最多文件个数，默认999

simUploadLimit：允许同时上传文件个数，同时执行，默认1，（注：3.0.0测试版注释此参数）

调试设置

debug：是否显示调试框，默认false

checkExisting：检查待上传文件是否存在程序，默认uploadify-check-existing.php

其他设置

fileObjName：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据，默认Filedata，（作用不明）

requeueErrors：未知，默认false

preventCaching：未知，默认true

progressData：未知，默认percentage

successTimeout：未知，默认30

transparent：未知，默认true

uploadLimit：未知，默认999

uploaderType：未知，默认html5

langFile：错误提示文件，可以忽略

id：当前操作的ID编码，默认jQuery(this).attr('id')，可以忽略。

 

onClearQueue: function () {}：未知

onDialogOpen: function () {}：打开选择文件窗口

onDialogClose: function () {}：关闭选择文件窗口

onInit: function () {}：初始化

onQueueComplete: function () {}：全部文件上传结束

onSelectError: function () {}：选择文件：选择错误

onSelect: function () {}：单个文件：选择文件，每选中一个文件都执行一次

onSWFReady: function () {}：未知

onUploadCancel: function () {}：未知

onUploadComplete: function () {}：单个文件上传结束，注意：最后一个文件结束在全部结束后

onUploadError: function () {}：上传文件错误/取消已选择文件

onUploadProgress: function () {}：单个文件：上传过程中

 

demo 下载，有问题大家可以一起讨论啊。。。。。

分享到：
| js 两个小括号 ()() 的用法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery上传插件Uploadify并传参数（一）

    **jQuery上传插件Uploadify详解及参数传递方法** 在Web开发中，文件上传功能是常见的需求，而jQuery的Uploadify插件提供了一种简洁、高效的方式实现这一功能。本篇文章将深入探讨Uploadify插件的基本使用，以及如何...

    JQuery批量上传插件Uploadify并传参数（二）

    这篇博客文章“JQuery批量上传插件Uploadify并传参数（二）”可能深入探讨了如何在使用Uploadify时传递额外参数，以增强其功能和定制性。 Uploadify是一款基于jQuery的JavaScript库，它允许用户通过拖放或选择多个...

    JQuery上传插件Uploadify

    总之，jQuery上传插件Uploadify是一个强大且灵活的工具，可以帮助开发者轻松地实现在网页上的文件上传功能，通过定制其参数和事件，可以满足各种项目需求。但随着技术的发展，考虑向HTML5的File API迁移也是必要的，...

    jQuery上传插件uploadify

    **jQuery上传插件Uploadify详解** Uploadify是一款基于...总之，jQuery上传插件Uploadify是提高Web应用中文件上传体验的利器，通过其丰富的参数设置和事件处理，开发者可以定制出满足各种需求的文件上传解决方案。

    jquery 上传插件Uploadify-v3.0.0.zip

    jQuery Uploadify是一款广泛使用的文件上传插件，它极大地简化了在Web应用中实现多文件上传的功能。这个插件的主要版本是v3.0.0，它提供了丰富的自定义选项和良好的用户体验。在本文中，我们将深入探讨Uploadify的...

    jquery文件上传插件 jquery.uploadify.js

    《jQuery文件上传插件jQuery.uploadify.js：跨越浏览器限制的智能解决方案》 在Web开发中，文件上传功能是一项常见的需求，而jQuery.uploadify.js是一款高效且用户友好的文件上传插件，尤其对于需要兼容多种浏览器...

    C# JQuery上传插件Uploadify使用

    Uploadify是一款基于JavaScript和Flash的文件上传插件，它与jQuery库紧密结合，为Web应用程序提供了简单易用且功能丰富的文件上传功能。在C#后端环境中，Uploadify可以帮助开发者实现多文件同时上传，大大提升了用户...

    jquery上传插件uploadify+php完美实现强大的文件上传功能实例+程序

    本实例将探讨如何利用jQuery上传插件Uploadify与PHP技术来构建一个强大的文件上传系统。Uploadify是一款广泛使用的前端插件，它使得文件上传过程更加直观、用户友好，并且支持批量上传和自定义样式，极大地提升了...

    .net jQuery上传插件Uploadify 文件 上传 实例，简单易懂

    在.NET开发中，文件上传是一项常见的任务，而jQuery Uploadify插件则为这一过程提供了便捷的解决方案。Uploadify是一款基于JavaScript和Flash的文件上传组件，它允许用户通过拖拽或选择文件的方式，实现多文件同时...

    JQuery上传插件Uploadify使用详解

    《JQuery上传插件Uploadify的全面解析与应用》 在Web开发中，文件上传功能是必不可少的一部分，而JQuery插件Uploadify则提供了一种优雅、高效的解决方案。Uploadify是一款基于JQuery的插件，它支持多文件上传、...

    JQuery上传插件Uploadify使用示例

    Uploadify是由Aaron Balog开发的一款基于jQuery的文件上传插件。它利用HTML5的File API和Flash技术，提供了丰富的功能和自定义选项，使得文件上传变得简单易用。Uploadify支持异步上传，用户可以在不刷新页面的情况...

    JQuery上传插件Uploadify使用详解.pdf

    jQuery Uploadify 是一款基于jQuery的文件上传插件，它提供了用户友好的界面，支持多文件选择、上传进度显示以及批量上传等功能。这个插件适用于那些希望在网页中实现复杂文件上传功能的开发者。Uploadify 通过Flash...

    jquery上传插件Uploadify3.2中文详细参考手册

    ### jQuery上传插件Uploadify 3.2中文详细参考手册 #### 一、概述 Uploadify是一款基于jQuery的文件上传插件，它提供了一个简单易用的接口来处理文件上传功能，尤其适用于需要多文件上传、文件预览等功能的场景。...

    jquery上传插件Uploadify3.2中文详细参考手册.pdf

    jQuery Uploadify是一款强大的、无刷新的文件上传插件，它使得用户在网页上进行文件上传时无需等待页面刷新，极大地提升了用户体验。Uploadify 3.2版本是其发展过程中的一个重要里程碑，提供了许多改进和新特性。 *...

    JQuery上传插件Uploadify使用详解.docx

    Uploadify 是一款基于 jQuery 的文件上传插件，它支持多文件选择、上传进度显示等功能，为用户提供了良好的交互体验。在 ASP.NET 环境中使用 Uploadify，我们需要完成以下步骤： 1. **安装和引入资源**：首先，下载...

    超棒的jquery上传插件Uploadify3.1中文详细参考手册

    Uploadify是一款基于JQuery的上传插件，能够实现高效且美观的文件上传功能。它为开发者提供了一个易于使用的API，使得集成文件上传功能变得简单便捷。对于初学者而言，Uploadify提供了详细的配置选项和事件，使得...

    jquery上传插件uploadify与php

    uploadify插件与php的结合，有上传后小图预览，带删除链接，中文转码，有注释，还有uploadify3.1的参数详解word文档。ps:自己学习jquery权威指南时遇到的问题，找了很堵资料，还是摸索出来了，php的处理不是很详细，...

    JQuery批量上传插件Uploadify使用详解及参数说明.docx

    **jQuery批量上传插件Uploadify**是一款非常实用的前端文件上传工具，它允许用户通过Flash技术实现批量、异步的文件上传。Uploadify提供了一系列可配置的参数，使其能够适应各种上传需求，同时具备良好的用户体验。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics