前提概要:必须动态设置业务所需值,经测试---1.好像只能直接写入,不能用jsonString这种参数 2.uploadify的上传多文件时,每个文件都会请求一次Action。总之,不适合做多文件并且表单参数较多的结合提交。如果仅有一个文件上传和少量的表单参数则比较适合
uploadify.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/uploadify.css"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#cancelHref").hide();
$("#uploadify").uploadify({
//页面相关
'uploader' : 'uploadify.swf', //是组件自带的flash,用于打开选取本地文件的按钮
'cancelImg' : 'images/cancel.png',//取消上传文件的按钮图片,就是个叉叉
'queueID' : 'fileQueue',//放置上传文件及上传进度的Html元素Id
'buttonText' : 'BROWSE',//按钮上的文字
//'buttonImg' : 'images/myButton.jpg', //解决中文按钮名的好方式
//服务器脚本
'script' : '<%=basePath%>uploadAction', //处理上传的路径,这里使用Struts2是XXX.action
//'scriptData' : {'userid': '12345', 'username': 'Alex Nie'}, //需要初始化的数据向服务器端传递。 如果是填写的表单,必须动态设置业务所需值
//控制开关
'auto' : false,//是否选取文件后自动上传
'multi' : true,//是否支持多文件上传
'displayData' : 'speed',//有speed和percentage两种,一个显示速度,一个显示完成百分比
'queueSizeLimit' : 3, //一次最多选择多少个文件上传
'simUploadLimit' : 2, //允许同时上传的个数 默认值:1 。
//'sizeLimit' : 2000*1024, // 单个文件的最大尺寸(字节为单位)
//传递给服务器参数
'fileDataName' : 'uploadify',//和input的name属性值保持一致就好,Struts2就能处理了
'folder' : 'upload', //上传文件的目录
'fileExt' : '*.jpg;*.gif;*.jpeg;*.png;*.bmp;*.doc',//允许的文件类型,在客户端约束用户的文件选择,并将作为'fileext'参数传递给服务器供校验用
//其他
//'fileDesc' : '*.jpg;*.gif;*.jpeg;*.png;*.bmp;*.doc',//显示在本地选择文件对话框的文件类型下拉框中。如果配置了以下的'fileExt'属性,那么这个属性是必须的。
'fileDesc' : '请选择rar doc pdf文件',
'onSelect': function(e, queueId, fileObj)//选择文件时触发,该函数有三个参数
{
//alert( "唯一标识:" + queueId + "\r\n" +
// "文件名:" + fileObj.name + "\r\n" +
// "文件大小:" + fileObj.size + "\r\n" +
// "创建时间:" + fileObj.creationDate + "\r\n" +
// "最后修改时间:" + fileObj.modificationDate + "\r\n" +
// "文件类型:" + fileObj.type
// );
$("#cancelHref").show();
},
'onComplete' : function (event, queueID, fileObj, response, data){
//当上传成功后执行触发
$("#result").html(response);//显示上传成功结果
setTimeout("cancelInfo('result')",5000);//5秒后删除显示的上传成功结果
},
'onAllComplete':function(event,data) {
//当所有文件上传完成后的操作
$("#cancelHref").hide();
if(data.errors==0){
$("#result").html("所有文件已上传成功(本次共上传"+data.filesUploaded+"个),上传总大小:"+data.allBytesLoaded+"字节,平均传输速度:"+data.speed+"KB/s");
}else{
$("#result").html("成功上传"+data.filesUploaded+"个文件,失败"+data.errors+"个,上传总大小:"+data.allBytesLoaded+"字节,平均传输速度:"+data.speed+"KB/s");
}
setTimeout("cancelInfo('result')",5000);//5秒后删除显示的上传成功结果
},
'onError': function(event, queueID, fileObj) {
//上传错误时触发
alert("文件:" + fileObj.name + "上传失败");
},
'onCancel': function(event, queueID, fileObj,data){
//当取消某一个文件时触发
$("#message").html("<font color='red'>" +"您取消掉了" + fileObj.name+"文件的上传"+ "</color><br/>");
setTimeout("cancelInfo('message')",5000);//5秒后删除显示的上传成功结果
if (data.fileCount==0) { //data.fileCount:取消一个文件后,文件队列中剩余文件的个数。
$("#cancelHref").hide();
}
cancelInfo('full');
},
'onOpen': function(event,ID,fileObj) {
//当有文件正在上传时的操作
$("#cancelHref").show();
},
'onQueueFull': function (event,queueSizeLimit) {
//当添加待上传的文件数量达到设置的上限时的操作
$("#full").append("<font color='red'>已经达到上传数量限制了,不能再添加了</color><br/>");
return false;
},
'onClearQueue': function(event, queueID, fileObj){
//当清空上传队列时触发
$("#message").html("<font color='red'>" +"您清空了上传队列"+ "</color><br/>");
setTimeout("cancelInfo('message')",5000);//5秒后删除显示的上传成功结果
}
});
});
function cancelInfo(id){//删除显示的上传成功结果
$("#" + id).html("");
}
function uploadFile(){//上传文件
//必须动态设置业务所需值,经测试---1.好像只能直接写入,不能用jsonString这种参数 2.uploadify的上传多文件时,每个文件都会请求一次Action。总之,不适合做多文件并且表单参数较多的结合提交。如果仅有一个文件上传和少量的表单参数则比较适合
//$('#uploadify').uploadifySettings('scriptData',{'user.username':$('#username').val()});//可以
$('#uploadify').uploadifySettings('scriptData',{'user.username':'zhangxuekai','user.password':'1598210','userid':'haha'}); //可以
//$('#uploadify').uploadifySettings('scriptData',{'computer.name':'dell','computer.price':'100'}); //可以
//$('#uploadify').uploadifySettings('scriptData',{'userid':'zhangxuekai'});//可以
//$('#uploadify').uploadifySettings('scriptData',{'userid':'1001','username':'zhangxuekai'});//可以
//不可以
//var jsonString = "{'user.username':'zhangxuekai','user.password':'1598210'}";
//$('#uploadify').uploadifySettings('scriptData',jsonString);
//不可以
//var jsonString = convertToJson($('#registerForm').serializeArray());
//alert(jsonString);
//$('#uploadify').uploadifySettings('scriptData',jsonString);
$('#uploadify').uploadifyUpload();
}
function startUpload(){
$('#uploadify').fileUploadStart();
}
function clearFile(){//清空所有上传队列
$('#uploadify').uploadifyClearQueue();
}
function convertToJson(formValues) {
var result = {};
for(var formValue,j=0;j<formValues.length;j++) {
formValue = formValues[j];
var name = formValue.name;
var value = formValue.value;
if (name.indexOf('.') < 0) {
result[name] = value;
continue;
} else {
var simpleNames = name.split('.');
// 构建命名空间
var obj = result;
for ( var i = 0; i < simpleNames.length - 1; i++) {
var simpleName = simpleNames[i];
if (simpleName.indexOf('[') < 0) {
if (obj[simpleName] == null) {
obj[simpleName] = {};
}
obj = obj[simpleName];
} else { // 数组
// 分隔
var arrNames = simpleName.split('[');
var arrName = arrNames[0];
var arrIndex = parseInt(arrNames[1]);
if (obj[arrName] == null) {
obj[arrName] = []; // new Array();
}
obj = obj[arrName];
multiChooseArray = result[arrName];
if (obj[arrIndex] == null) {
obj[arrIndex] = {}; // new Object();
}
obj = obj[arrIndex];
}
}
if(obj[simpleNames[simpleNames.length - 1]] ) {
var temp = obj[simpleNames[simpleNames.length - 1]];
obj[simpleNames[simpleNames.length - 1]] = temp;
}else {
obj[simpleNames[simpleNames.length - 1]] = value;
}
}
}
//alert("转化的jsonObj:" +result)
//alert("转化的jsonString:" +JSON.stringify(result));
return JSON.stringify(result);
}
</script>
</head>
<body>
cc<%=basePath%>
<div id="full"></div>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:uploadFile()">Upload Files</a>
<a href="javascript:clearFile()" id="cancelHref">Clear Queue</a>
</p>
<div id="message"></div>
<div id="result"></div><!--显示结果-->
<form id="registerForm" >
<input type="text" name="user.username" id="username"/>
<input type="text" name="user.password" id="password"/>
<input type="text" name="userid" id="userid"/>
</form>
<input type="button" οnclick="convertToJson($('#registerForm').serializeArray())" value="转json">
<br/>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
UploadifyAction
package com.pb.cdjj.zxk.uploadAction;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.pb.cdjj.zxk.entity.Computer;
import com.pb.cdjj.zxk.entity.User;
/**
* @author zxk
*
*/
public class UploadifyAction extends ActionSupport {
private static final int BUFFER_SIZE = 16*1024;
private File uploadify;
private String uploadifyFileName;
private String userid;
private String username;
private String folder;
private String fileext;
private User user;
private Computer computer;
public String uploadFile() throws Exception {
// System.out.println("computer.getName()-------->" + computer.getName());
// System.out.println("computer.getPrice()-------->" + computer.getPrice());
System.out.println("user.getUsername()-------->" + user.getUsername());
System.out.println("user.getPassword()-------->" + user.getPassword());
System.out.println("userid-------->" + userid);
System.out.println("username-------->" + username);
System.out.println("fileext-------->" + fileext);
System.out.println("folder-------->" + folder);
System.out.println("uploadifyFileName-------->" + uploadifyFileName);
String extName = "";// 扩展名
String newFileName = "";// 新文件名
String nowTime = new SimpleDateFormat("yyyymmddHHmmss").format(new Date());// 当前时间
String savePath = ServletActionContext.getRequest().getRealPath("/");
savePath = savePath + "upload/";
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
// 获取扩展名
if (uploadifyFileName.lastIndexOf(".") >= 0) {
extName = uploadifyFileName.substring(uploadifyFileName.lastIndexOf("."));
}
String fileName = uploadifyFileName.substring(0,uploadifyFileName.lastIndexOf("."));
System.out.println("fileName-------->" +fileName);
newFileName = fileName + nowTime + extName;
System.out.println("newFileName-------->" +newFileName);
// uploadify.renameTo(new File(savePath + newFileName));
copy(uploadify,new File(savePath + newFileName));
System.out.println("savePath-------->" + savePath);
response.getWriter().print(uploadifyFileName + "上传成功");
return null; // 这里不需要页面转向,所以返回空就可以了
}
private static void copy(File src, File dst) {
try {
System.out.println("进入copy()");
InputStream in = null;
OutputStream out = null;
try {
in = new BufferedInputStream(new FileInputStream(src),BUFFER_SIZE);
out = new BufferedOutputStream(new FileOutputStream(dst),BUFFER_SIZE);
byte[] buffer = new byte[BUFFER_SIZE];
// while (in.read(buffer) > 0) {
// out.write(buffer);
// }
int length = 0;
while ((length = in.read(buffer)) != -1) {
out.write(buffer, 0, length);
}
} finally {
if (null != in) {
in.close();
}
if (null != out) {
out.close();
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public String getFileext() {
return fileext;
}
public void setFileext(String fileext) {
this.fileext = fileext;
}
public String getFolder() {
return folder;
}
public void setFolder(String folder) {
this.folder = folder;
}
public String getUserid() {
return userid;
}
public void setUserid(String userid) {
this.userid = userid;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public File getUploadify() {
return uploadify;
}
public void setUploadify(File uploadify) {
this.uploadify = uploadify;
}
public String getUploadifyFileName() {
return uploadifyFileName;
}
public void setUploadifyFileName(String uploadifyFileName) {
this.uploadifyFileName = uploadifyFileName;
}
public Computer getComputer() {
return computer;
}
public void setComputer(Computer computer) {
this.computer = computer;
}
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
strusts.xml
<action name="uploadAction" class="com.pb.cdjj.zxk.uploadAction.UploadifyAction" method="uploadFile">
</action>