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

yangpanwww

浏览: 625456 次
性别:
来自: 杭州

最近访客更多访客>>

lichen_1314

qq_24313835

leimingchao

onetwofree

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

jQuery Servlet JavaScript Apache CSS

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

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

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

文章: 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>&nbsp;
			<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 文章改进来的....

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

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

效果图：

图1：