`

Struts2结合Jquery.uploadify上传插件的应用

Struts+Jquery.uploadify 
阅读更多
     这几天一直在搞文件上传，刚开始用struts自带的上传标签进行处理，感觉不是很完美，因为每次只能上传一个文件，自己操作了几次，就感觉不是很方面。然后看到网上说可以动态生成input输入框，这样一次就可以多上传几个附件了，改了之后，感觉还是不是很完美，因为每次需要手工点击“添加附件”的按钮后才可以自动生成一个input文件选择框。然后就在网上继续找完美的解决方案，终于发现Struts+Jquery.uploadify可以完美解决这个问题，而且效果也很漂亮。


jsp页面代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page pageEncoding="UTF-8"%>
<html>
  <head>
    <title>上传/下发文件(国内)列表 </title>
<%@include file="/base/inc/commons.inc"%>
<link href="<%=contextPath%>/base/css/queryForm.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="<%=contextPath%>/mgr/comexport/reportUpload4.js"></script>
<script type="text/javascript" src="<%=contextPath%>/base/js/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="<%=contextPath%>/base/js/swfobject/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/base/js/uploadify/uploadify.css"/> 
  <script type="text/javascript"> 
$(function() {
var i=0;
var errMsg="";
$("#file").uploadify({
height        : 20,
swf           : '<%=contextPath%>/base/js/uploadify/uploadify.swf',
uploader      : '<%=contextPath%>/localnet/comexport/rReportUpload/fileUplodMethod.action',
width         : 100,
buttonImg     : '<%=contextPath%>/base/css/images/default/tree/folder-open.gif',
buttonText    : '添加附件 ',
auto   : false,
cancelImage   : '<%=contextPath%>/base/js/uploadify/cancel.png',
fileObjName   :'file',
fileSizeLimit : '1024MB',
fileTypeExts  : '*.xls;*.XLS;*.rar;*.RAR',
fileTypeDesc  : '请选择xls或rar格式的文件!',
method   : 'post',
queueID       : 'fileQueue',
queueSizeLimit: 999,
progressData  : 'all',
removeCompleted : true,
removeTimeout : 1,
multi   : true,
formData      : {'random':''},
dataType   : 'json',
progressData  : 'percentage',
onUploadStart : function(file) {
                  $("#file").uploadify("settings", "formData", {'random':Math.random()});
       },
onComplete: function (event, queueID, fileObj, response, data) {  
   
                    $('<li></li>').appendTo('.files').text(response +" 00000000");  
            }, 
onSelectError : function(file,errorCode,errorMsg)
{
    alert( '文件' + file.name+'上传失败!');
},
onCancel: function(event, queueID, fileObj){  
                //alert("取消了" + fileObj.name);  
            },
            onUploadSuccess : function(file,data,response) {
            if(response){
            var obj=eval("("+data+")");
            if(obj.success){
            i=i+1;
            }
            else{
            errMsg+="文件:"+file.name +" 上传失败!\n";
            } 
            }else{
            alert("上传失败,请联系管理员!");
            }
            },
            onQueueComplete:function(queueData){
            if(errMsg !=""){
            alert(errMsg);
            $('#gridContainer').gridOptions( {newp : 1}).gridReload();
            }else{
            alert("上传成功!");
            $('#gridContainer').gridOptions( {newp : 1}).gridReload();
            }
            /* if(queueData.uploadsSuccessful==i){
            if(queueData.uploadsErrored==0){
            alert("上传成功!");
            $('#gridContainer').gridOptions( {newp : 1}).gridReload();
            }else{
            alert("上传失败!");
            }
            }else{
            alert("上传失败!");
            } */
                }
});
});

    </script>

<style type="text/css">  
a 
{  
    color: #707070; 
    font-family: "Tahoma";   
    font-size: 13.5px;   
}  
img  
{  
    color:#CEE0FF;  
    font-family: "Tahoma";   
    font-size: 13px;   
    /*  background-color:#CEE0FF;   */
width: 13.5px;
height: 13.5px;
}  
</style>  
  </head>
  <body>
    <div id="headerDiv">
<div class="queryDiv">
<fieldset>
<div class="queryTableDiv">
<table class="table_seach_div" id="query_bar_div">
<tbody>
<td colspan="3"> 
                <input type="file" name="file" id="file" /> 
                <div id="fileQueue"></div> 
                 
                    
                   <img src="<%=contextPath%>/base/css/images/default/grid/col-move-bottom.gif"> 开始上传 
                               
                   <img src="<%=contextPath%>/base/css/images/default/tree/drop-no.gif" > 取消所有上传 
              
 
                    <ol class=files></ol> 
                    </td>
</tbody>
</table>
</div>
</fieldset>
</div>
</div>
<div id="gridContainer"></div>
</body>
</html>









后台JavaAction代码：


@SuppressWarnings("serial")
@ParentPackage("ppmweb")
public class RReportUploadAction extends CommonAction {

//@Qualifier("rReportUploadService") 
@Autowired
private IRReportUploadService  rReportUploadService;
private RReportUploadBean    rReportUploadBean;

private File[] file;
private String[] fileFileName;
private String[] fileContentType;

/* private File[] file;
private String[] fileFileName;
private String[] fileContentType;*/

//主键数组，用于删除
    public String[] reportNames;
    public String[] upTimes;

private static final int BUFFER_SIZE=16*1024;


@Action(value = "/localnet/comexport/rReportUpload/queryList")
public String queryList()throws Exception {
queryParam = ActionUtil.prepareQuery(rReportUploadBean, request);
if(rReportUploadBean ==null){
rReportUploadBean=new RReportUploadBean();
}
rReportUploadBean.setExtraOrderColumns("up_time desc");
ServiceResult<RReportUploadBean> list=rReportUploadService.queryList(rReportUploadBean, queryParam.getRowBounds());
// 导出操作
if (excelBean != null) {
File f=File.createTempFile("exp", "xls");
FileOutputStream outputStream = new FileOutputStream(f);
ExcelUtil.createExcel(list.getResult(), excelBean, outputStream);
ServiceResult<RReportUploadBean> context = super.getContext();
context.setUserObject(f.getAbsolutePath());
super.writeJson(context);
} else {
//输出到grid
super.write4Grid(list);
}
return NONE;
}

/*
* 文件上传(将文件上传到服务器临时目录/outtemplet/upload)
*/
@Action(value = "/localnet/comexport/rReportUpload/fileUplodMethod")
public String fileUplodMethod(){
String encoding = System.getProperty("sun.jnu.encoding");
ServiceResult<RReportUploadBean> result = super.getContext();
InputStream in=null;
OutputStream out=null;
boolean up=true;
String str="";
if(file !=null && file.length >0){
for (int i = 0; i < file.length; i++) {
try {
System.out.println("上传文件名:"+fileFileName +" ;上传文件的路径为:"+file[i].getAbsolutePath());
File desDirect=new File(ServletActionContext.getServletContext().getRealPath(File.separator+"outtemplet"+File.separator+"upload"+File.separator+new String(fileFileName[i].getBytes("GBK"), encoding)));
//FileUtils.copyFileToDirectory(file, desDirect);
in=new BufferedInputStream(new FileInputStream(file[i]),BUFFER_SIZE);
out=new BufferedOutputStream(new FileOutputStream(desDirect));
byte[] buff=new byte[BUFFER_SIZE];
while(in.read(buff) >0){
out.write(buff);
}

} catch (Exception e) {
up=false;
result.setSuccess(false);
result.setMessage(e.getMessage());
System.out.println("RReportUploadAction.fileUplodMethod() 文件复制出错!");
}finally{
try {
if(null !=in){
in.close();
}
if(null !=out){
out.close();
}
} catch (IOException e) {
System.out.println("关闭文件读写流出错!");
e.printStackTrace();
}
}
if(up){
Date date = new Date();
RReportUploadBean uploadBean = new RReportUploadBean();
uploadBean.setReportName(fileFileName[i]);
uploadBean.setUpTime(date);
uploadBean.setStaffName(getStaffName());
result = rReportUploadService.insertEntity(uploadBean);
if(!result.isSuccess()){
str+=result.getMessage();
}
}
}
}
try {
if(!str.equals("")){
result.setSuccess(false);
result.setMessage(str);
}
super.writeJson(result);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return NONE;
}


/*
* 文件下发(将文件同步到/gjjs/data/upload目录下)
*/
@Action(value = "/localnet/comexport/rReportUpload/fileDownLoadMethod")
public String fileDownLoadMethod()throws Exception {
String resut="";
ServiceResult<RReportUploadBean> context = super.getContext();
String encoding = System.getProperty("sun.jnu.encoding");
String home=System.getProperty("user.home");
String desDirect="";
if(home.endsWith(File.separator)){
desDirect=home+"data"+File.separator+"upload";
}else {
desDirect=home+File.separator +"data"+File.separator+"upload";
}
System.out.println("打印文件主目录:"+home);
System.out.println("打印移动目标目录:"+desDirect);

SimpleDateFormat sDateFormat=new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
if(reportNames !=null && reportNames.length >0 && upTimes !=null && upTimes.length>0){
for (int i = 0; i < reportNames.length; i++) {
//复制文件
String srcFilePath=ServletActionContext.getServletContext().getRealPath(File.separator+"outtemplet"+File.separator+"upload"+File.separator+new String(reportNames[i].getBytes("GBK"), encoding));
File srcFile=new File(srcFilePath);
if(srcFile.exists()){
String resuStr=FileCopyUtil.fileCopyMethod(srcFilePath, desDirect, reportNames[i]);
if(resuStr.equals("")){
RReportUploadBean uploadBean=new RReportUploadBean();
uploadBean.setReportName(reportNames[i]);
uploadBean.setUpTime(sDateFormat.parse(upTimes[i].replace("-", "/")));
uploadBean=rReportUploadService.loadEntity(uploadBean);
if(uploadBean !=null){
uploadBean.setDownTime(new Date());
if(resuStr.equals("")){
//说明复制成功
uploadBean.setDownFlag("1");
}else {
uploadBean.setDownFlag("2");  //复制失败
}
context=rReportUploadService.updateEntity(uploadBean);
if (!context.isSuccess()) {
resut+=reportNames[i]+" 该文件写数据库出错!";
}
}
}else {
System.out.println(reportNames[i] +"  该文件在下发过程中出错!");
}

}else {
System.out.println(reportNames[i]+"  该文件不存在!");
resut+=reportNames[i]+"  该文件不存在!";
continue;
}
}
}else {
context.setMessage("传入参数为空！");
context.setSuccess(false);
}
if(resut.length()>0){
context.setMessage(resut);
context.setSuccess(false);
}else {
context.setMessage("下发成功!");
context.setSuccess(true);
}
writeJson(context);
return NONE;
}



/*
* 跳转到上传/下发界面
*/
@Action(value = "/comexport/rReportUpload/toUploadPage", results = { @Result(name = "success", location = "/mgr/comexport/reportUpload4.jsp") })
public String toUploadPage() {
System.out.println("+++++++跳转到上传/下发界面+++++++++");
return SUCCESS;
}

}




具体的方法，属性，参数的用法可以参考：http://www.cnblogs.com/akingyao/archive/2012/09/05/2671297.html



遗留问题：中文乱码
后台返回json格式的数据后，前台获得obj.message一直是乱码。捣鼓了好长时间也没解决...........  




  2014-08-14 0:48    @yanggaonanlu.pudongqu.shanghai
0
顶
0
踩
分享到：
| Ajax提交无法导出Excel
评论
3 楼 bewithme 2014-08-14  
我记得uploadify这破东西只能在chrome浏览器中才有用，多文件上传非得用这个吗? struts对多文件上传支持很简单的

public void upload(File[] files);

页面上

<input type="file" name="files[0]" />

<input type="file" name="files[1]" />

<input type="file" name="files[2]" />
2 楼 MrLee23 2014-08-14  
http://mrlee23.iteye.com/admin/blogs/1453933
1 楼 crysik 2014-08-14  
import com.eshore.ppm.model.comexport.BatchDataImportBean;
import com.eshore.ppm.model.comexport.RReportUploadBean;
import com.eshore.ppm.model.sm.SysstaffBean;
import com.eshore.ppm.service.inf.comexport.IRReportUploadService;
import com.eshore.common.model.Operation;
import com.eshore.common.util.QueryParam;
import com.eshore.common.web.action.ActionUtil;
import com.eshore.common.web.action.CommonAction;
import com.eshore.common.model.ServiceResult;
import com.eshore.common.util.excel.ExcelUtil;
import com.eshore.common.util.file.FileCopyUtil;
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    struts2+jquery.uploadify实现上传下载

    Struts2是一个强大的MVC（模型-视图-控制器）框架，它被广泛应用于Java Web开发中，提供了灵活的控制层来处理用户请求并管理业务逻辑。jQuery则是一款高效的JavaScript库，简化了DOM操作、事件处理和动画效果。...

    struts2+jquery.uploadify

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

    struts2 jquery.uploadify

    这个简单的demo展示了如何在Struts2应用中集成jQuery Uploadify，以便提供用户友好的、多文件异步上传体验。下面我们将深入探讨这个知识点。 首先，我们来了解jQuery Uploadify。Uploadify是一个基于jQuery的插件，...

    jquery.uploadify+Struts2整合配置

    1. **配置依赖**：确保项目中包含了jQuery库、Uploadify插件以及Struts2的相关jar包。通常，这些可以通过Maven或Gradle等构建工具引入。 2. **HTML页面设置**：在HTML页面中引入jQuery和Uploadify的JavaScript及CSS...

    jquery.uploadify3.2在struts2中使用的完整工程

    【jQuery Uploadify 3.2在Struts2中的应用】 jQuery Uploadify 3.2是一个流行的前端文件上传插件，它允许用户通过Ajax技术实现异步、多文件上传功能，大大提升了用户界面的交互性和用户体验。这个完整的工程是将...

    struts2上传文件与uploadify插件的应用

    至此，我们已经实现了使用Struts2和Uploadify插件进行文件上传的功能。这个过程中，Struts2处理了文件上传的服务器端逻辑，而Uploadify则提供了前端的交互界面和异步上传能力。通过这种方式，我们可以构建出高效且...

    jquery_uploadify实现的下载进度条

    通过以上步骤，你就能在Struts2环境中利用jQuery Uploadify实现一个功能完善的文件上传组件，其中包括下载进度条的功能。这个过程不仅提升了用户体验，也展示了现代Web开发中动态交互设计的魅力。

    jquery.xheditor和jquery,uploadify实现文件上传完整实例

    jquery xheditor是jquery中较好的编辑器插件,而jquery.uploadify也是jquery实现文件上传很优秀的插件,本项目实例解决了两个插件文件上传的问题,对于应用学习两个插件,实现文件上传,具有很好的参考价值,同时本例子是...

    使用jquery的uploadify插件实现文件上传

    综上所述，使用jQuery的uploadify插件实现文件上传涉及了jQuery库的使用、uploadify插件的配置、Struts2框架的集成以及Java后端的文件处理。在实际开发中，可以根据项目需求对这些步骤进行调整和优化，以实现更高效...

    JQuery_uploadify_struts2_jsp__ajax多文件上传

    标题中的"JQuery_uploadify_struts2_jsp__ajax多文件上传"涉及到的是一个使用jQuery、uploadify插件、Struts2和JSP技术实现的AJAX多文件上传功能。这个功能允许用户在不刷新页面的情况下，上传多个文件到服务器。 ...

    jquery+uploadify + struts2 + jsp 图片批量上传Demo

    在本文中，我们将深入探讨如何使用jQuery、Uploadify、Struts2和JSP技术实现一个图片批量上传的Demo。这个组合提供了高效、用户友好的文件上传解决方案，特别适合需要处理大量图片的Web应用。 首先，jQuery是一个轻...

    Uploadify结合Struts2上传demo

    本教程将围绕"Uploadify结合Struts2上传demo"这一主题，详细介绍如何在Struts2框架下集成Uploadify实现文件上传功能。 首先，我们需要在项目中引入Uploadify的相关资源。这通常包括JavaScript库（uploadify.js）和...

    jQuery uploadify上传文件(JAVA版+Struts2即时预览效果)

    在本文中，我们将深入探讨如何在Java环境下，结合Struts2框架和jQuery的uploadify插件实现文件上传功能，特别是解决中文乱码问题。这个功能对于任何需要用户交互式上传内容的Web应用都是至关重要的。 首先，jQuery ...

    Struts2+uploadify上传文件

    Struts2和Uploadify是两种在Web开发中用于文件上传的技术。Struts2是一个基于MVC（模型-视图-控制器）设计模式的Java Web框架，它提供了强大的表单处理和动作调度功能。Uploadify则是一个JavaScript库，利用Flash...

    在Struts2中使用Uploadify组件上传文件

    ### 在Struts2中使用Uploadify组件上传文件 #### 一、Uploadify简介与特性 Uploadify是一款基于jQuery的文件上传插件，以其强大的功能和优秀的用户体验受到开发者们的青睐。它利用Flash技术实现异步文件上传，使得...

    uploadify struts2实现图片上传

    本篇文章将深入探讨如何使用uploadify这款jQuery插件与Struts2框架结合，实现图片的上传功能。 首先，uploadify是一款强大的前端文件上传插件，它基于JavaScript库jQuery，提供了丰富的自定义选项和友好的用户界面...

    Uploadify + Struts2 实现文件上传详解

    本文将详细介绍如何结合Uploadify和Struts2实现文件上传。 **1. 准备工作** 首先，确保项目中已经集成了SSH（Struts2、Hibernate、Spring）框架，这些框架可以帮助我们更好地管理和处理业务逻辑。另外，需要安装和...

    jquery uploadify java版本（整合strut2web项目）

    在IT行业中，jQuery Uploadify是一款广泛使用的前端文件上传插件，它可以实现异步批量上传，大大提升了用户体验。本文将深入探讨如何将jQuery Uploadify与Java后端框架Struts2进行整合，以实现在Web项目中的文件上传...

Magicbox
Global site tag (gtag.js) - Google Analytics