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

本文主要是介绍JQuery、ajaxFileUpload、Struts2和注解异步上传文件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近,公司要求做的一个项目涉及到文件上传,因为页面同时有四个上传按钮,要求是无页面刷新,所以想到了用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;
}

}


这篇关于JQuery、ajaxFileUpload、Struts2和注解异步上传文件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/937383

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

《在SpringBoot中使用@Autowired和@Bean注解的示例详解》本文通过一个示例演示了如何在SpringBoot中使用@Autowired和@Bean注解进行依赖注入和Bean... 目录在 Spring Boot 中使用 @Autowired 和 @Bean 注解示例背景1. 定义 Stud

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Spring排序机制之接口与注解的使用方法

《Spring排序机制之接口与注解的使用方法》本文介绍了Spring中多种排序机制,包括Ordered接口、PriorityOrdered接口、@Order注解和@Priority注解,提供了详细示例... 目录一、Spring 排序的需求场景二、Spring 中的排序机制1、Ordered 接口2、Pri

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

Idea实现接口的方法上无法添加@Override注解的解决方案

《Idea实现接口的方法上无法添加@Override注解的解决方案》文章介绍了在IDEA中实现接口方法时无法添加@Override注解的问题及其解决方法,主要步骤包括更改项目结构中的Languagel... 目录Idea实现接China编程口的方法上无法添加@javascriptOverride注解错误原因解决方

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

Java中基于注解的代码生成工具MapStruct映射使用详解

《Java中基于注解的代码生成工具MapStruct映射使用详解》MapStruct作为一个基于注解的代码生成工具,为我们提供了一种更加优雅、高效的解决方案,本文主要为大家介绍了它的具体使用,感兴趣... 目录介绍优缺点优点缺点核心注解及详细使用语法说明@Mapper@Mapping@Mappings@Co

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...