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

野性酷女 2022-04-17 00:07 306阅读 0赞

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

[官方][Link 1] ： [http://www.uploadify.com/][Link 1]

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

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

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

## ##

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

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

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

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

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

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

jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
    <%
    	String path = request.getContextPath(); 
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    	<head> 
    	    <title>QQ:609865047  ---  妞见妞爱</title>
    		<meta http-equiv="pragma" content="no-cache">
    		<meta http-equiv="cache-control" content="no-cache">
    		<meta http-equiv="expires" content="0">
    	</head>
    
    	<body> 
    		<link href="js/uploadify.css" rel="stylesheet" type="text/css" />
    		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    		<script type="text/javascript" src="js/swfobject.js"></script>
    		<script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
    		<script type="text/javascript">
    		 $(document).ready(function() {
    		  $("#uploadify").uploadify({
    		   'uploader'       : 'js/uploadify.swf',
    		   'script'         : 'scripts/uploadify',//servlet的路径或者.jsp 这是访问servlet 'scripts/uploadif' 
    		   'method'         :'GET',  //如果要传参数，就必须改为GET
    		   'cancelImg'      : 'js/cancel.png',
    		   'folder'         : 'uploads', //要上传到的服务器路径，
    		   'queueID'        : 'fileQueue',
    		   'auto'           : false, //选定文件后是否自动上传，默认false
    		   'multi'          : true, //是否允许同时上传多文件，默认false
    		   'simUploadLimit' : 1, //一次同步上传的文件数目  
    		   'sizeLimit'      : 19871202, //设置单个文件大小限制，单位为byte  
    		   'queueSizeLimit' : 5, //限制在一次队列中的次数（可选定几个文件）。默认值= 999，而一次可传几个文件有 simUploadLimit属性决定。
    		   'fileDesc'       : '支持格式:jpg或gif', //如果配置了以下的'fileExt'属性，那么这个属性是必须的  
    		   'fileExt'        : '*.jpg;*.gif',//允许的格式
    		   'scriptData'     :{'name':$('#name').val()}, // 多个参数用逗号隔开 'name':$('#name').val(),'num':$('#num').val(),'ttl':$('#ttl').val()
    		   　onComplete: function (event, queueID, fileObj, response, data) {
    		    var value = response ;
    		   　   alert("文件:" + fileObj.name + "上传成功");
    		   　},  
    		   　onError: function(event, queueID, fileObj) {  
    		   　 alert("文件:" + fileObj.name + "上传失败");  
    		   　},  
    		   　onCancel: function(event, queueID, fileObj){  
    		   　 alert("取消了" + fileObj.name);  
    		   　　　} 
    		  });
    		 });
    		 
    		 
    		 function uploasFile(){ 
    		 	  //校验
    		 	  var name=document.getElementById("name").value; 
    			  if(name.replace(/\s/g,'') == ''){
    					alert("名称不能为空！");
    					return false;
    			  }  
    			  //设置 scriptData 的参数
    		      $('#uploadify').uploadifySettings('scriptData',{'name':$('#name').val()});
    		      //上传
    		 	  jQuery('#uploadify').uploadifyUpload() 	 		 
    		 }
    		  
    		 
     </script>
             名称:<input type="text" id="name" name="name" value="妞见妞爱" >
    		<div id="fileQueue"></div> 
    		<input type="file" name="uploadify" id="uploadify" />
    		<p>
    			<a href="javascript:uploasFile()">开始上传</a> 
    			<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
    		</p>
    	</body>
    </html>

Uploadify.java

package com;
    
    import java.io.BufferedInputStream;
    import java.io.BufferedOutputStream;
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.Iterator;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.commons.fileupload.FileItem;
    import org.apache.commons.fileupload.FileUploadException;
    import org.apache.commons.fileupload.disk.DiskFileItemFactory;
    import org.apache.commons.fileupload.servlet.ServletFileUpload;
    import org.apache.commons.fileupload.util.Streams;
     
    
    public class Uploadify extends HttpServlet {
    	 
    	private static final long serialVersionUID = 1L;
    
    	/**
    	 * 实现多文件的同时上传
    	 */ 
    	public void doGet(HttpServletRequest request,
    			HttpServletResponse response) throws ServletException, IOException {
    		
    		//设置接收的编码格式
    		request.setCharacterEncoding("UTF-8");
    		Date date = new Date();//获取当前时间
    		SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");
    		SimpleDateFormat sdfFolder = new SimpleDateFormat("yyMM");
    		String newfileName = sdfFileName.format(date);//文件名称
    		String fileRealPath = "";//文件存放真实地址
    		
    		String fileRealResistPath = "";//文件存放真实相对路径
    		
    		//名称  界面编码 必须 和request 保存一致..否则乱码
    		String name = request.getParameter("name");
    			
    		 
    		String firstFileName="";
    		// 获得容器中上传文件夹所在的物理路径
    		String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "uploads\\" + newfileName +"\\";
    		System.out.println("路径" + savePath);
    		File file = new File(savePath);
    		if (!file.isDirectory()) {
    			file.mkdir();
    		}
    
    		try {
    			DiskFileItemFactory fac = new DiskFileItemFactory();
    			ServletFileUpload upload = new ServletFileUpload(fac);
    			upload.setHeaderEncoding("UTF-8");
    			// 获取多个上传文件
    			List fileList = fileList = upload.parseRequest(request);
    			// 遍历上传文件写入磁盘
    			Iterator it = fileList.iterator();
    			while (it.hasNext()) {
    				FileItem item = (FileItem) it.next();
    				
    				// 如果item是文件上传表单域   
    				// 获得文件名及路径   
    				String fileName = item.getName();
    				if (fileName != null) {
    					firstFileName=item.getName().substring(item.getName().lastIndexOf("\\")+1);
    					String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));//获取文件后缀名
    					fileRealPath = savePath + newfileName+ formatName;//文件存放真实地址
    					
    					BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
    					BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流
    					Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹
    					//上传成功，则插入数据库
    					if (new File(fileRealPath).exists()) {
    						//虚拟路径赋值
    						fileRealResistPath=sdfFolder.format(date)+"/"+fileRealPath.substring(fileRealPath.lastIndexOf("\\")+1);
    						//保存到数据库
    						System.out.println("保存到数据库:");
    						System.out.println("name:"+name);
    						System.out.println("虚拟路径:"+fileRealResistPath);
    					}
    					 
    				} 
    			} 
    		} catch (FileUploadException ex) {
    			ex.printStackTrace();
    			System.out.println("没有上传文件");
    			return;
    	   } 
    	   response.getWriter().write("1");
    		
    	}
     
    	public void doPost(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
    		doGet(req, resp);
    	}
    }

web.xml

<servlet>
      <servlet-name>Uploadify</servlet-name>
      <servlet-class>com.Uploadify</servlet-class>
     </servlet>
     <servlet-mapping>
      <servlet-name>Uploadify</servlet-name>
      <url-pattern>/scripts/uploadify</url-pattern>
     </servlet-mapping>

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

我也是根据 dada\_fangfang 大哥 [http://dada-fangfang.iteye.com/blog/865177][http_dada-fangfang.iteye.com_blog_865177] 文章改进来的....

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

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

效果图：

图1：  
![11ace4d6-1e91-3f01-ad35-f3aad353228d.jpg][]

图2：  
   
![c5450550-9274-3a2b-a340-cd37e05b2588.jpg][]

[Link 1]: http://www.uploadify.com/
[http_dada-fangfang.iteye.com_blog_865177]: http://dada-fangfang.iteye.com/blog/865177
[11ace4d6-1e91-3f01-ad35-f3aad353228d.jpg]: /images/20220417/1b6bb15af8d34173b822b05a417bc812.png
[c5450550-9274-3a2b-a340-cd37e05b2588.jpg]: /images/20220417/2baebaec3a36432f9d31b8fa19463723.png