struts2+jquery 实现 多文件上传功能
今天 用 struts2+jquery 实现 多文件上传功能 一开始 遇到个问题，就是
传多个文件 时 后台进行处理时，始终只能得到第一个文件，这里 很有可能 是
你没有 把表单提交，因为 你很有可能 在表单 提交的时候 调用 的一段 ajax
如
function ajaxFileUpload()
{
//$("#loading")
//.ajaxStart(function(){
//$(this).show();
//})
//.ajaxComplete(function(){
//$(this).hide();
//});
alert(document.getElementById('fileToUpload').value);
return false;
$.ajaxFileUpload
(
{
url:'${pageContext.request.contextPath}/attach/upload!uploadImage.action?root_id=4444&file_type=5',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)
return false;
}
这个 就像 一个 ifame 包含 一个action一样 他并没有把 你的 form表单提交，所以。。。不过 在 后台 得到 参数的时候 注意一下，我在下面 遇到时 重点说下
从网上 把，jquery.js，jquery.MetaData.js，jquery.MultiFile.js下载下来。
jquertUpload.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>Ajax File Uploader Plugin For Jquery</title>
<script src='${pageContext.request.contextPath}/inc/js/jquery.js' type="text/javascript"></script>
<script src='${pageContext.request.contextPath}/inc/js/jquery.MetaData.js' type="text/javascript"></script>
<script src='${pageContext.request.contextPath}/inc/js/jquery.MultiFile.js' type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<form name="form" action="${pageContext.request.contextPath}/attach/upload!multiUploadFile.action?root_id=4444&file_type=5" method="POST"
enctype="multipart/form-data" target="_self">
<table cellpadding="0" cellspacing="0" class="tableForm">
<thead>
<tr>
<th>
Please select a file and click Upload button
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="file" name="upload" class="multi {accept:'gif|jpg', max:3, STRING:{ remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!', duplicate:'Arquivo ja selecionado:\n$file!'}}" id="file-upload"/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input type="submit" id="buttonUpload" value="Upload">
</button>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
</body>
</html>
struts2.xml
<package name="attach" extends="struts-default" namespace="/attach">
<action name="upload" class="attachAction">
<interceptor-ref name="fileUpload">
<param name="allowedTypes">
image/pjpeg, image/bmp,image/png,image/gif,image/jpeg,image/jpg
</param>
</interceptor-ref>
<interceptor-ref name ="defaultStack" /> <result name="success">/inc/uploadImg.jsp</result>
<result name="remove">/inc/uploadImg.jsp</result>
<result name="query">/inc/uploadImg.jsp</result>
<result name="input">/inc/uploadImg.jsp</result>
<result name="multi">/inc/jqueryUpload.jsp</result>
</action>
</package>
AttachAction.java
//可以用List也可以用array 这里大家注意下 参数名并不是 页面上的参数名，而set确实 页面的参数
private List<File> uploads;
private String[] uploadFileNames;
public List<File> getUpload() {
return uploads;
}
public void setUpload(List<File> upload) {
this.uploads = upload;
} public String[] getUploadFileName() {
return uploadFileNames;
}
public void setUploadFileName(String[] uploadFileName) {
this.uploadFileNames = uploadFileName;
}
public String multiUploadFile(){
if(uploads!=null){
for(int i=0;i<uploads.size();i++){
File f=(File)uploads.get(i);
String name=uploadFileNames[i];
copy(f,name);
}
}
return "multi";
}
//上传图片 具体功能
public void copy(File file,String name){
AttachDAO dao= (AttachDAO)getDao();
try {
name =new Date().getTime()+ name;
java.io.InputStream is = new java.io.FileInputStream(file);
File f=new File(filePath+"/"+root_id);
if(!f.exists()){
f.mkdirs();
}
java.io.OutputStream os = new java.io.FileOutputStream(filePath+"/"+root_id+"/"+name);
byte buffer[] = new byte[8192];
int count = 0;
while ((count = is.read(buffer)) > 0)
{
os.write(buffer, 0, count);
}
os.close();
is.close();
String file_path="/upload"+"/"+root_id+"/"+name;
dao.insert(new Object[]{root_id,name,file_type,file_path,"","","",""});
} catch (Exception e) {
e.printStackTrace();
}
}
///我的action是通过 spring生成的，这里 没有贴出 spring的配置文件
传多个文件 时 后台进行处理时，始终只能得到第一个文件，这里 很有可能 是
你没有 把表单提交，因为 你很有可能 在表单 提交的时候 调用 的一段 ajax
如
function ajaxFileUpload()
{
//$("#loading")
//.ajaxStart(function(){
//$(this).show();
//})
//.ajaxComplete(function(){
//$(this).hide();
//});
alert(document.getElementById('fileToUpload').value);
return false;
$.ajaxFileUpload
(
{
url:'${pageContext.request.contextPath}/attach/upload!uploadImage.action?root_id=4444&file_type=5',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)
return false;
}
这个 就像 一个 ifame 包含 一个action一样 他并没有把 你的 form表单提交，所以。。。不过 在 后台 得到 参数的时候 注意一下，我在下面 遇到时 重点说下
从网上 把，jquery.js，jquery.MetaData.js，jquery.MultiFile.js下载下来。
jquertUpload.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>Ajax File Uploader Plugin For Jquery</title>
<script src='${pageContext.request.contextPath}/inc/js/jquery.js' type="text/javascript"></script>
<script src='${pageContext.request.contextPath}/inc/js/jquery.MetaData.js' type="text/javascript"></script>
<script src='${pageContext.request.contextPath}/inc/js/jquery.MultiFile.js' type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<form name="form" action="${pageContext.request.contextPath}/attach/upload!multiUploadFile.action?root_id=4444&file_type=5" method="POST"
enctype="multipart/form-data" target="_self">
<table cellpadding="0" cellspacing="0" class="tableForm">
<thead>
<tr>
<th>
Please select a file and click Upload button
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="file" name="upload" class="multi {accept:'gif|jpg', max:3, STRING:{ remove:'Remover', selected:'Selecionado: $file', denied:'Invalido arquivo de tipo $ext!', duplicate:'Arquivo ja selecionado:\n$file!'}}" id="file-upload"/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input type="submit" id="buttonUpload" value="Upload">
</button>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
</body>
</html>
struts2.xml
<package name="attach" extends="struts-default" namespace="/attach">
<action name="upload" class="attachAction">
<interceptor-ref name="fileUpload">
<param name="allowedTypes">
image/pjpeg, image/bmp,image/png,image/gif,image/jpeg,image/jpg
</param>
</interceptor-ref>
<interceptor-ref name ="defaultStack" /> <result name="success">/inc/uploadImg.jsp</result>
<result name="remove">/inc/uploadImg.jsp</result>
<result name="query">/inc/uploadImg.jsp</result>
<result name="input">/inc/uploadImg.jsp</result>
<result name="multi">/inc/jqueryUpload.jsp</result>
</action>
</package>
AttachAction.java
//可以用List也可以用array 这里大家注意下 参数名并不是 页面上的参数名，而set确实 页面的参数
private List<File> uploads;
private String[] uploadFileNames;
public List<File> getUpload() {
return uploads;
}
public void setUpload(List<File> upload) {
this.uploads = upload;
} public String[] getUploadFileName() {
return uploadFileNames;
}
public void setUploadFileName(String[] uploadFileName) {
this.uploadFileNames = uploadFileName;
}
public String multiUploadFile(){
if(uploads!=null){
for(int i=0;i<uploads.size();i++){
File f=(File)uploads.get(i);
String name=uploadFileNames[i];
copy(f,name);
}
}
return "multi";
}
//上传图片 具体功能
public void copy(File file,String name){
AttachDAO dao= (AttachDAO)getDao();
try {
name =new Date().getTime()+ name;
java.io.InputStream is = new java.io.FileInputStream(file);
File f=new File(filePath+"/"+root_id);
if(!f.exists()){
f.mkdirs();
}
java.io.OutputStream os = new java.io.FileOutputStream(filePath+"/"+root_id+"/"+name);
byte buffer[] = new byte[8192];
int count = 0;
while ((count = is.read(buffer)) > 0)
{
os.write(buffer, 0, count);
}
os.close();
is.close();
String file_path="/upload"+"/"+root_id+"/"+name;
dao.insert(new Object[]{root_id,name,file_type,file_path,"","","",""});
} catch (Exception e) {
e.printStackTrace();
}
}
///我的action是通过 spring生成的，这里 没有贴出 spring的配置文件