今天 用 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的配置文件
分享到:
相关推荐
总的来说,"struts2+jquery+ajax文件异步上传"是一个结合了后端处理和前端交互的文件上传解决方案,提供了良好的用户体验和灵活性。通过MyEclipse这样的集成开发环境,开发者可以方便地构建、调试和部署这样的项目。
struts2+ajax+jquery异步批量上传超大文件,单文件最大支持2G,一次文件数量,文件大小都可设置。简单明了。绝对可用,稍微懂点的就可以修改为自己所用。你值得拥有! 我会分享给大家更多更好的东西,希望支持!
Struts2和jQuery结合实现的多文件上传功能是一种常见的Web开发技术,特别是在处理大量数据时,用户需要上传多个文件的情况。这个项目的核心是利用Struts2的Action支持和jQuery的AJAX功能,以及一个用于展示进度条的...
Struts2.0+jquery.progressbar实现上传文件进度条 附带实例源码 uploadJqueryProgress.jsp uploadprogress.jsp 两个上传页面,两种不一样风格的进度条。uploadJqueryProgress.jsp 是在 uploadprogress.jsp 的基础...
struts2+ajax+jquery异步批量上传超大文件.zip struts2+ajax+jquery异步批量上传超大文件.zip struts2+ajax+jquery异步批量上传超大文件.zip struts2+ajax+jquery异步批量上传超大文件.zip struts2+ajax+jquery异步...
总结来说,"Struts2+jQuery+Ajax实现头像上传切割图片"是一个典型的前后端交互示例,涉及到文件上传、图片处理、异步通信等多个环节。理解并掌握这些技术,能够帮助开发者构建出更加高效、用户友好的Web应用。
在这个"struts+jQuery+ajax文件上传带进度条"的项目中,我们主要关注的是如何利用这些技术实现在后台处理文件上传时,前端能够显示实时的进度条效果,提升用户体验。 首先,Struts是一个基于MVC(Model-View-...
1. **Struts2上传**:Struts2通过Interceptor(拦截器)机制实现了文件上传功能。默认情况下,Struts2配置了一个名为`params`的拦截器,它可以处理POST请求中的表单数据,包括文件。为了支持文件上传,我们需要在...
本项目名为“struts2+easyui+uploadfye文件上传”,它结合了多种技术和工具来实现一个高效的、具有动画效果的文件上传功能。下面将详细介绍这个项目所涉及的关键知识点。 首先,`Struts2` 是一个基于MVC(模型-视图...
Struts2和jQuery是Web开发中的两个重要框架,它们结合使用可以实现许多强大的功能,其中包括异步文件上传。在这个主题中,我们将详细讨论如何利用Struts2和jQuery的form插件来实现这一功能。 首先,Struts2是一个...
Struts2和jQuery Uploadify是两个在Web开发中常见的组件,它们主要用于实现用户界面的文件上传功能。在本文中,我们将深入探讨这两个组件的工作原理、如何集成以及它们在实际项目中的应用。 首先,Struts2是一款...
在本篇文章中,我们将深入探讨如何结合Struts2和jQuery的uploadify插件来实现文件上传功能,这在现代Web应用程序中是非常常见的需求。 首先,Struts2是一个基于MVC(Model-View-Controller)架构的开源Java框架,它...
基于eclipse + easyUi1.2.6+common-fileupload + struts2实现带进度条的文件上传DEMO,具体效果跟思路可见我的博客:http://blog.csdn.net/jun55xiu/article/details/22042279
Struts2和jQuery是Web开发中的两个重要框架,它们结合使用可以实现许多强大的功能,比如异步上传图片并在页面上预览。在这个场景中,我们将深入探讨如何利用jQuery的form插件来实现在Struts2环境中进行图片上传,并...
在本文中,我们将深入探讨如何使用jQuery和Struts2框架实现文件上传功能。这是一个常见的需求,在Web应用中,用户可能需要上传图片、文档等文件。jQuery是一个轻量级的JavaScript库,提供了丰富的交互效果和API,而...
在"struts+jquery文件上传"这个主题中,我们将探讨如何结合这两者来实现用户友好的文件上传功能。 首先,文件上传在Web应用中是一个常见的需求,它允许用户上传图片、文档等数据到服务器。在Struts2框架中,我们...
3. FileAction.java:处理文件上传和分页查询的Struts2 Action。 4. FileEntity.java:表示文件信息的实体类,与数据库表进行映射。 5. index.jsp:首页,包含文件列表和分页控件。 6. JavaScript脚本:处理Ajax请求...
在本例中,我们将探讨如何结合Struts2和jQuery实现图片的同步上传功能。 首先,让我们分析`upload.jsp`页面。这个页面是用户与应用交互的界面,它包含了一个Struts2的表单(`<s:form>`),用于文件上传。表单的属性...
总结来说,这个项目展示了如何利用Struts2和Ajax技术实现批量文件上传的功能。它涉及到前端的文件选择、Ajax请求的创建,以及后端的文件接收和处理。虽然原始的压缩包没有包含所有的库和配置文件,但以上步骤提供了...