JQuery、ajaxFileUpload、Struts2和注解异步上传文件

本文介绍了一种使用jQuery Ajax实现的异步文件上传方法。通过ajaxFileUpload组件,可以轻松地实现在不刷新页面的情况下上传文件。文中详细展示了所需的文件引入顺序及JSP和JS代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近,公司要求做的一个项目涉及到文件上传,因为页面同时有四个上传按钮,要求是无页面刷新,所以想到了用Jquery的Ajax进行上传,但是由于本人 没查到JQuery的文件上传组件,因此就去网上搜索,找到了一个很好的组件ajaxFileUpload,利用此组件成功实现了异步文件上传!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
第一步:需要导入jquery-1.7.2.min.js、ajaxfileupload.js两个文件,在jsp页面引入的顺序必须是jquery-1.7.2.min.js在先,ajaxfileupload.js在后,因为ajaxfileupload.js依赖与jquery包,所以你懂得!
 
 
 
  jsp页面代码:
<!-- lang: html -->
< button id = "uploadSubmit" type = "submit" class = "btn btn-sm btn-info col-md-1 col-md-offset-1" onclick = "FileUpload('uploadSubmit');" >
                     < span class = "glyphicon glyphicon-upload" ></ span >Upload
                 </ button >
 
js代码:
<!-- lang: js -->
function FileUpload(buttonId) {
$.ajaxFileUpload({
     url : 'fileUpload!upload',// 用于文件上传的服务器端请求地址
     type : "post",
     dataType : "json",
     timeout : 1000,
     secureuri : false,// 一般设置为false
     fileElementId : uploadId,// 文件上传空间的id属性 < input type = "file" id = "uploadId" />
     error : function(XMLHttpRequest, textStatus, errorThrown) {
 
     },
     success : function(data) {
 
     }
 
});

}

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!-- lang: java -->
package cn.caculate.web.action;
 
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
 
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.InterceptorRef;
import org.apache.struts2.convention.annotation.InterceptorRefs;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.convention.annotation.Results;
import org.springframework.beans.factory.annotation.Autowired;
 
import cn.caculate.service.upload.IFileUploadService;
 
import com.opensymphony.xwork2.ActionSupport;
 
@Action ( "fileUpload" )
@InterceptorRefs (value = { @InterceptorRef ( "fileUploadStack" ) })
@Results ({ @Result (name = "jsonType" , type = "json" ) })
public class CopyOfFileUploadAction extends ActionSupport {
 
private static final long serialVersionUID = 1L;
private static final int BUFFER_SIZE = 16 * 1024 ;
 
 
/**
  * 需要上传的文件
  */
private File upload;
 
/**
  * 上传文件的类型
  */
private String uploadContentType;
 
/**
  * 文件名
  */
private String uploadFileName;
 
/**
  * 上传之后的文件名
  */
private String storageFileName;
 
/**
  * 文件上传的路径
  */
public String path = ServletActionContext.getServletContext().getRealPath(
         File.separator + "WEB-INF" + File.separator + "file" );
 
/**
  * 新文件上传
  *
  * @return
  */
public String upload() {
     try {
         // 将Struts2自动封装的文件名赋给要写入的文件
         storageFileName = uploadFileName;
         // 创建要写入的文件
         File storageFile = new File(path + "//" + storageFileName);
         copy(upload, storageFile);
         return "jsonType" ;
     } catch (Exception e) {
         e.printStackTrace();
     }
     return null ;
}
 
/**
  * 上传文件的主要方法
  *
  * @param src
  * @param dst
  * @return
  */
public boolean copy(File src, File dst) {
     try {
         InputStream in = null ;
         OutputStream out = null ;
         try {
             in = new BufferedInputStream( new FileInputStream(src),
                     BUFFER_SIZE);
             out = new BufferedOutputStream( new FileOutputStream(dst),
                     BUFFER_SIZE);
             byte [] buffer = new byte [BUFFER_SIZE];
             while (in.read(buffer) > 0 ) {
                 out.write(buffer);
             }
         } finally {
             if ( null != in) {
                 in.close();
             }
             if ( null != out) {
                 out.close();
             }
         }
     } catch (Exception e) {
         e.printStackTrace();
     }
     return true ;
}
 
public File getUpload() {
     return upload;
}
 
public void setUpload(File upload) {
     this .upload = upload;
}
 
public String getUploadContentType() {
     return uploadContentType;
}
 
public void setUploadContentType(String uploadContentType) {
     this .uploadContentType = uploadContentType;
}
 
public String getUploadFileName() {
     return uploadFileName;
}
 
public void setUploadFileName(String uploadFileName) {
     this .uploadFileName = uploadFileName;
}
 
public String getStorageFileName() {
     return storageFileName;
}
 
public void setStorageFileName(String storageFileName) {
     this .storageFileName = storageFileName;
}
 
 
public String getPath() {
     return path;
}
 
public void setPath(String path) {
     this .path = path;
}

}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值