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

listen-raining

浏览: 116963 次
性别:
来自: 广州

最近访客更多访客>>

lzb820

dyu2012

mm327791929

qiyulin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery

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

uploadify.zip (48.9 KB)
下载次数: 10

swfobject_2_2.zip (27.4 KB)
下载次数: 6

源码.zip (124.7 KB)
下载次数: 11

0
顶

0
踩

分享到：

ORA-00918: column ambiguously defined | Ajax提交无法导出Excel

2014-08-14 00:49
浏览 1778
评论(3)
分类:Web前端
查看更多

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;

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论