`
touch_mai
  • 浏览: 40054 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

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的配置文件


























分享到:
评论

相关推荐

    struts2+jquery+ajax文件异步上传

    总的来说,"struts2+jquery+ajax文件异步上传"是一个结合了后端处理和前端交互的文件上传解决方案,提供了良好的用户体验和灵活性。通过MyEclipse这样的集成开发环境,开发者可以方便地构建、调试和部署这样的项目。

    struts2+ajax+jquery异步批量上传超大文件

    struts2+ajax+jquery异步批量上传超大文件,单文件最大支持2G,一次文件数量,文件大小都可设置。简单明了。绝对可用,稍微懂点的就可以修改为自己所用。你值得拥有! 我会分享给大家更多更好的东西,希望支持!

    struts2+jquery多文件上传显示进度条,可直接运行(非常强大)

    Struts2和jQuery结合实现的多文件上传功能是一种常见的Web开发技术,特别是在处理大量数据时,用户需要上传多个文件的情况。这个项目的核心是利用Struts2的Action支持和jQuery的AJAX功能,以及一个用于展示进度条的...

    Struts2.0+jquery.progressbar实现上传文件进度条 实例源码

    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异步批量上传超大文件.zip struts2+ajax+jquery异步...

    struts2+jquery+ajax实现头像上传切割图片

    总结来说,"Struts2+jQuery+Ajax实现头像上传切割图片"是一个典型的前后端交互示例,涉及到文件上传、图片处理、异步通信等多个环节。理解并掌握这些技术,能够帮助开发者构建出更加高效、用户友好的Web应用。

    struts+jQuery+ajax文件上传带进度条

    在这个"struts+jQuery+ajax文件上传带进度条"的项目中,我们主要关注的是如何利用这些技术实现在后台处理文件上传时,前端能够显示实时的进度条效果,提升用户体验。 首先,Struts是一个基于MVC(Model-View-...

    struts2+jquery.uploadify实现上传下载

    1. **Struts2上传**:Struts2通过Interceptor(拦截器)机制实现了文件上传功能。默认情况下,Struts2配置了一个名为`params`的拦截器,它可以处理POST请求中的表单数据,包括文件。为了支持文件上传,我们需要在...

    struts2+easyui+uploadfye文件上传

    本项目名为“struts2+easyui+uploadfye文件上传”,它结合了多种技术和工具来实现一个高效的、具有动画效果的文件上传功能。下面将详细介绍这个项目所涉及的关键知识点。 首先,`Struts2` 是一个基于MVC(模型-视图...

    struts2+jquery之form插件实现异步上传

    Struts2和jQuery是Web开发中的两个重要框架,它们结合使用可以实现许多强大的功能,其中包括异步文件上传。在这个主题中,我们将详细讨论如何利用Struts2和jQuery的form插件来实现这一功能。 首先,Struts2是一个...

    struts2 + jquery uploadfiy

    Struts2和jQuery Uploadify是两个在Web开发中常见的组件,它们主要用于实现用户界面的文件上传功能。在本文中,我们将深入探讨这两个组件的工作原理、如何集成以及它们在实际项目中的应用。 首先,Struts2是一款...

    struts2+jquery.uploadify

    在本篇文章中,我们将深入探讨如何结合Struts2和jQuery的uploadify插件来实现文件上传功能,这在现代Web应用程序中是非常常见的需求。 首先,Struts2是一个基于MVC(Model-View-Controller)架构的开源Java框架,它...

    easyUi+jquery+common-file-upload +struts2带进度条的文件上传DEMO

    基于eclipse + easyUi1.2.6+common-fileupload + struts2实现带进度条的文件上传DEMO,具体效果跟思路可见我的博客:http://blog.csdn.net/jun55xiu/article/details/22042279

    struts2+jquery之form插件实现异步上传图片并显示

    Struts2和jQuery是Web开发中的两个重要框架,它们结合使用可以实现许多强大的功能,比如异步上传图片并在页面上预览。在这个场景中,我们将深入探讨如何利用jQuery的form插件来实现在Struts2环境中进行图片上传,并...

    jquery+struts2实现文件上传

    在本文中,我们将深入探讨如何使用jQuery和Struts2框架实现文件上传功能。这是一个常见的需求,在Web应用中,用户可能需要上传图片、文档等文件。jQuery是一个轻量级的JavaScript库,提供了丰富的交互效果和API,而...

    struts+jquery文件上传

    在"struts+jquery文件上传"这个主题中,我们将探讨如何结合这两者来实现用户友好的文件上传功能。 首先,文件上传在Web应用中是一个常见的需求,它允许用户上传图片、文档等数据到服务器。在Struts2框架中,我们...

    struts2+hibernate(文件批量上传至数据库+Ajax分页显示)

    3. FileAction.java:处理文件上传和分页查询的Struts2 Action。 4. FileEntity.java:表示文件信息的实体类,与数据库表进行映射。 5. index.jsp:首页,包含文件列表和分页控件。 6. JavaScript脚本:处理Ajax请求...

    Struts2 JQuery同步上传图片

    在本例中,我们将探讨如何结合Struts2和jQuery实现图片的同步上传功能。 首先,让我们分析`upload.jsp`页面。这个页面是用户与应用交互的界面,它包含了一个Struts2的表单(`&lt;s:form&gt;`),用于文件上传。表单的属性...

    struts2+ajax实现批量上传文件(简单实现,自己加工)

    总结来说,这个项目展示了如何利用Struts2和Ajax技术实现批量文件上传的功能。它涉及到前端的文件选择、Ajax请求的创建,以及后端的文件接收和处理。虽然原始的压缩包没有包含所有的库和配置文件,但以上步骤提供了...

Global site tag (gtag.js) - Google Analytics