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>
<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：
图2：
955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
