上传下载
主要实现用ajax实现文件的上传和下载
下载:
<div>
<span>a.png</span>
<a href="javascript:download('a.png')" id="link">下载文件</a><br>
</div>
<script>
var message = $("#message");
var link=$("#link");
function download(wr){
var url = "../updown/parsefiles.do";
var data="filename="+wr;
$.ajax({
url : url,
type : "post",
data : data,
dataType : "json",
async : false,
processData : false, //不要处理 data数据!!!
contentType : false, //不要有JQuery设定ContentType
success : function(json) {
var a = document.createElement('a');
var url = '../updown/downloadfiles.do?filename='+wr;
a.href=url;
a.click()
}
});
}
</script>
/**
* 处理下载请求
*/
@RequestMapping("/parsefiles.do")
@ResponseBody
public ResponseResult parseFiles(String filename, HttpServletRequest request,HttpServletResponse response) throws IOException {
ResponseResult<Void> rr = new ResponseResult<Void>();
rr.setMessage("ok");
return rr;
}
@RequestMapping("/downloadfiles.do")
@ResponseBody
public void download(String filename, HttpServletRequest request,HttpServletResponse response) throws IOException {
// 1,文件位置
String path = "/../upload/uploadfiles/";// WEB路径
path = request.getRealPath(path + filename);
System.out.println(path);
// 创建upload文件夹
File file = new File(path);
byte a[] = new byte[600]; // 创建字节数组用来存储读取的内容
FileInputStream fin = new FileInputStream(file); // 创建文件字节输入
//
response.setContentType("application/x-download");
response.setHeader("Content-disposition","attachment;filename="+ URLEncoder.encode(filename, "UTF-8"));
response.setHeader("Content_Lenght",file.length());
int read = 0;
while ((read = fin.read(a)) != -1) { // 循环从fin流中读取内容到a中
response.getOutputStream().write(a, 0, read); // 将a中的内容写入outs流中
}
response.getOutputStream().flush();
response.getOutputStream().close(); // 关闭流
fin.close();
}
可以动态的获取文件列表和下载链接列表,ajax访问可以用来设置一些文件路径规则等,成功后因为ajax不能返回文件所以新建了一个a标签
上载:
spring-mvc.xml文件配置
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 请求编码格式 -->
<property name="defaultEncoding" value="utf-8"></property>
<!-- 上传文件大小(单位:字节) -->
<property name="maxUploadSize" value="50000000"></property>
<!-- 缓冲区大小(单位:KB) -->
<property name="maxInMemorySize" value="1024"></property>
</bean>
前端
<form action="${base}/updown/uploadfiles.do" method="post" enctype="multipart/form-data">
<label for="files">上传一个文件</label>
<input type="file" name="files" /> <br>
<input type="submit" value="Upload" />
</form>
<hr>
<form method="post" enctype="multipart/form-data" action="#" id="mupload">
<input type="text" id="filesname" style="height:30px;width:300px;font-size:10px;padding-left:10px;border-radius:5px;"/>
<select id="selectfiletype" style="height:30px;width:300px;font-size:14px;padding-left:10px;border-radius:5px;">
<option value="imges">图片/.gif/.jpeg/.jpg/.png/.svg</option>
<option value="all" selected="selected">所有文件</option>
</select>
<input type="file" multiple="multiple" name="files" id="fileinput" class="hide"/>
<input type="button" value="上传" id="ajax_upload" style="height:30px;width:100px;font-size:14px;margin-left:20px;border-radius:5px;"/>
</form>
<hr>
<script>
var url = "${base}/updown/uploadfiles.do";
var filesname=$("#filesname");
var selectfiletype=$("#selectfiletype");
var fileinput = $("#fileinput");
var ajaxBtn = $("#ajax_upload");
fileinput.change(function() {
console.log(fileinput);
$("#filesname").val(fileinput[0].files[0].name);
});
filesname.focus(function(){
fileinput.click();
});
selectfiletype.change(function(){
if(selectfiletype.val()=="image"){
fileinput[0].accept="image/gif,image/jpeg,image/jpg,image/png,image/svg";
}else{
fileinput[0].accept="*";
}
});
ajaxBtn.click(function() {
var data = new FormData($("#mupload")[0]);
ajaxBtn.val("上载中...");
$.ajax({
url : url,
type : "POST",
data : data,
dataType : "json",
processData : false, //不要处理 data数据!!!
contentType : false, //不要有JQuery设定ContentType
success : function(json) {
ajaxBtn.val(json.message);
window.setTimeout(function() {
ajaxBtn.val("上传");
}, 1000)
},
error : function(json) {
ajaxBtn.val("上传失败");
window.setTimeout(function() {
ajaxBtn.val("上传");
}, 1000)
}
});
});
</script>
设置上传文件类型
1.accept=”application/msexcel” 2.accept=”application/msword” 3.accept=”application/pdf”
4.accept=”application/poscript” 5.accept=”application/rtf” 6.accept=”application/x-zip-compressed”
7.accept=”audio/basic” 8.accept=”audio/x-aiff” 9.accept=”audio/x-mpeg”
10.accept=”audio/x-pn/realaudio” 11.accept=”audio/x-waw”
12.accept=”image/gif” 13.accept=”image/jpeg” 14.accept=”image/tiff”
15.accept=”image/x-ms-bmp” 16.accept=”image/x-photo-cd” 17.accept=”image/x-png”
18.accept=”image/x-portablebitmap” 19.accept=”image/x-portable-greymap”
20.accept=”image/x-portable-pixmap” 21.accept=”image/x-rgb”
22.accept=”text/html” 23.accept=”text/plain”
24.accept=”video/quicktime” 25.accept=”video/x-mpeg2” 26.accept=”video/x-msvideo”
method="post" enctype="multipart/form-data" 在form中
multiple="multiple" 在input file中
/**
* 处理上载请求
*/
@RequestMapping("/uploadfiles.do")
@ResponseBody
public ResponseResult<Void> upload(@RequestParam(value = "files", required = true) MultipartFile[] files,
HttpServletRequest request) throws IOException {
// 保存到文件系统
String path = "/../upload/uploadfiles";// WEB路径
path = request.getRealPath(path);
System.out.println(path);
// 创建upload文件夹
File dir = new File(path);
dir.mkdir();
for (MultipartFile file : files) {
File f = new File(dir, file.getOriginalFilename());
// 将上载文件保存到文件中
file.transferTo(f);
}
ResponseResult<Void> rr = new ResponseResult<Void>();
rr.setState(ResponseResult.OK);
rr.setMessage("上载成功");
return rr;
}
struts的文件上传,参考自https://www.w3cschool.cn/struts_2/struts_file_uploads.html
Struts2 文件上传
由 lxjazni_7 创建,youj 最后一次修改 2016-12-12
Struts2 框架为依据“基于表单的HTML文件上传”所进行的文件处理上传提供了内置支持。当文件上传时,它通常会存储在临时目录中,然后Action类应对其进行处理或移动到固定目录中,以确保数据不会丢失。
注意:服务器可能有适当的安全策略,禁止你写入临时目录以外的目录以及属于Web应用程序的目录。
通过一个名为FileUpload的预定义拦截器可以在Struts中上传文件,该拦截器可通过org.apache.struts2.interceptor.FileUploadInterceptor类获得,并作为defaultStack的一部分包含在内。你也将在接下来的内容中看到如何使用它在struts.xml文件中设置各种参数。
创建视图文件
创建视图时需要浏览和上传选定的文件。因此,让我们先使用HTML上传表单,创建一个允许用户上传文件的index.jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>File Upload</title>
</head>
<body>
<form action="upload" method="post" enctype="multipart/form-data">
<label for="myFile">Upload your file</label>
<input type="file" name="myFile" />
<input type="submit" value="Upload"/>
</form>
</body>
</html>
在上面的例子中有几点值得注意。首先,表单的enctype设置为multipart/form-data,要使得文件上传拦截器成功处理文件上传,这个就必须设置。然后要注意的是表单的action方法上传和文件上传字段的名称(即myFile)。我们需要这些信息来创建action方法和struts配置。
接下来让我们创建一个简单的jsp文件success.jsp来显示我们文件上传成功后的结果。
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>File Upload Success</title>
</head>
<body>
You have successfully uploaded <s:property value="myFileFileName"/>
</body>
</html>
以下是结果文件error.jsp,一旦上传文件出错时会使用:
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>File Upload Error</title>
</head>
<body>
There has been an error in uploading the file.
</body>
</html>
创建Action类
接下来,让我们创建一个名为uploadFile.java的Java类,它将负责上传文件并将文件存储在安全的位置:
package cn.w3cschool.struts2;
import java.io.File;
import org.apache.commons.io.FileUtils;
import java.io.IOException;
import com.opensymphony.xwork2.ActionSupport;
public class uploadFile extends ActionSupport{
private File myFile;
private String myFileContentType;
private String myFileFileName;
private String destPath;
public String execute()
{
/* Copy file to a safe location */
destPath = "C:/apache-tomcat-6.0.33/work/";
try{
System.out.println("Src File name: " + myFile);
System.out.println("Dst File name: " + myFileFileName);
File destFile = new File(destPath, myFileFileName);
FileUtils.copyFile(myFile, destFile);
}catch(IOException e){
e.printStackTrace();
return ERROR;
}
return SUCCESS;
}
public File getMyFile() {
return myFile;
}
public void setMyFile(File myFile) {
this.myFile = myFile;
}
public String getMyFileContentType() {
return myFileContentType;
}
public void setMyFileContentType(String myFileContentType) {
this.myFileContentType = myFileContentType;
}
public String getMyFileFileName() {
return myFileFileName;
}
public void setMyFileFileName(String myFileFileName) {
this.myFileFileName = myFileFileName;
}
}
uploadFile.java是一个非常简单的类。要注意的重点是,FileUpload拦截器和Parameters拦截器为我们承担了所有的重工作量。默认情况下,FileUpload拦截器为你提供三个参数,它们分别按以下方式命名:
-
[文件名参数] - 这是用户已上传的实际文件。在这个例子中它将是“myFile”
-
[文件名参数]ContentType - 这是上传的文件的内容类型。在这个例子中,它将是“myFileContentType”
-
[文件名参数]FileName - 这是上传的文件的名称。在这个例子中,它将是“myFileFileName”
得益于Struts拦截器这三个参数均可供我们使用。我们要做的是在Action类中创建三个带有正确名称的参数,并使这些变量可以自动连接。所以,在上面的例子中,我们有三个参数和一个action方法。如果一切正常,则返回“success”,否则返回“error”。
配置文件
以下是控制文件上传过程的Struts2 配置属性:
序号 | 属性和说明 |
---|---|
1 | struts.multipart.maxSize
可接受的上传文件的最大值(以字节为单位),默认值为250M。 |
2 | struts.multipart.parser
用于上传多部分表单的库,默认为jakarta。 |
3 | struts.multipart.saveDir
存储临时文件的位置,默认是javax.servlet.context.tempdir。 |
你可以在应用程序的struts.xml文件中使用constant标签更改任意一个这些设置,我们可以看以下struts.xml的示例:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.devMode" value="true" />
<constant name="struts.multipart.maxSize" value="1000000" />
<package name="helloworld" extends="struts-default">
<action name="upload" class="cn.w3cschool.struts2.uploadFile">
<result name="success">/success.jsp</result>
<result name="error">/error.jsp</result>
</action>
</package>
</struts>
因为FileUpload拦截器是defaultStack拦截器的一部分,我们不需要准确的配置它,但你可以在<action>中添加<interceptor-ref>标签。fileUpload拦截器有两个参数:maximumSize和allowedTypes。 maximumSize参数是设置所允许的文件大小的最大值(默认约为2MB)。allowedTypes参数是所允许的内容(MIME)类型的用逗号分隔的列表,如下所示:
<action name="upload" class="cn.w3cschool.struts2.uploadFile">
<interceptor-ref name="basicStack">
<interceptor-ref name="fileUpload">
<param name="allowedTypes">image/jpeg,image/gif</param>
</interceptor-ref>
<result name="success">/success.jsp</result>
<result name="error">/error.jsp</result>
</action>
<interceptor-ref name="fileUpload">
<param name="allowedTypes">image/jpeg,image/gif</param>
</interceptor-ref>
<result name="success">/success.jsp</result>
<result name="error">/error.jsp</result>
</action>
以下是web.xml文件的内容:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>Struts 2</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
现在右键单击项目名称,然后单击“Export”>“WAR File”创建WAR文件。然后在Tomcat的webapps目录中部署WAR文件。最后,启动Tomcat服务器并尝试访问URL http://localhost:8080/HelloWorldStruts2/upload.jsp,将显示如下界面:
现在使用浏览按钮选择一个文件“Contacts.txt”,然后点击上传按钮,上传文件到服务器,你将看到如下页面。你上传的文件应该保存在C:\apache-tomcat-6.0.33\work下。
注意:FileUpload拦截器会自动删除上传的文件,因此你必须在上传的文件被删除之前将其以编程方式保存在某个位置。
错误信息
fileUplaod拦截器使用几个默认的错误信息key:
序号 | 错误信息key和说明 |
---|---|
1 | struts.messages.error.uploading
无法上传文件时发生的常规错误。 |
2 | struts.messages.error.file.too.large
当上传的文件过大(由maximumSize指定)时发生。 |
3 | struts.messages.error.content.type.not.allowed
当上传的文件与指定的预期内容类型不匹配时发生。 |
你可以在WebContent/WEB-INF/classes/messages.properties资源文件中覆盖这些消息文本。