实现异步文件上传功能！
This commit is contained in:
parent
0a22d33d78
commit
c41bcc6a35
@ -63,6 +63,19 @@
|
||||
<version>2.13.4</version>
|
||||
</dependency>
|
||||
|
||||
<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
|
||||
<dependency>
|
||||
<groupId>commons-io</groupId>
|
||||
<artifactId>commons-io</artifactId>
|
||||
<version>2.11.0</version>
|
||||
</dependency>
|
||||
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
|
||||
<dependency>
|
||||
<groupId>commons-fileupload</groupId>
|
||||
<artifactId>commons-fileupload</artifactId>
|
||||
<version>1.4</version>
|
||||
</dependency>
|
||||
|
||||
</dependencies>
|
||||
|
||||
<build>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: Kane
|
||||
* @Date: 2022-09-28 15:47:02
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-09-29 00:14:00
|
||||
* @LastEditTime: 2022-09-30 00:33:41
|
||||
* @FilePath: \car_dealer\src\main\java\com\cpic\xim\car_dealer\controllers\fileupload\FileUploadController.java
|
||||
* @Description:
|
||||
*
|
||||
@ -11,6 +11,7 @@
|
||||
|
||||
package com.cpic.xim.car_dealer.controllers.fileupload;
|
||||
|
||||
import java.io.File;
|
||||
import java.io.IOException;
|
||||
import java.nio.channels.IllegalSelectorException;
|
||||
import javax.servlet.ServletException;
|
||||
@ -18,6 +19,7 @@ import javax.servlet.http.HttpServletRequest;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
import org.springframework.context.annotation.Scope;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.CrossOrigin;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
import org.springframework.web.multipart.MultipartFile;
|
||||
@ -37,30 +39,64 @@ public class FileUploadController
|
||||
/*****************************************************
|
||||
* @param request
|
||||
* @param response
|
||||
* @param file
|
||||
* @param uploadFile
|
||||
* @return FileUploadResult
|
||||
*****************************************************/
|
||||
@RequestMapping( path = "/upload" )
|
||||
@ResponseBody
|
||||
public FileUploadResult uploadFile( HttpServletRequest request, HttpServletResponse response,
|
||||
MultipartFile file ) throws IllegalSelectorException, IOException
|
||||
@CrossOrigin
|
||||
public FileUploadResult uploadFile( HttpServletRequest request, MultipartFile uploadFile,
|
||||
String test ) throws IllegalSelectorException, IOException
|
||||
{
|
||||
response.setContentType( "text/json;charset=UTF-8" );
|
||||
// response.setContentType( "text/json;charset=UTF-8" );
|
||||
// response.setHeader( "Access-Control-Allow-Origin", "*" );
|
||||
// response.setHeader( "Access-Control-Allow-Methods", "GET,POST" );
|
||||
|
||||
FileUploadResult result = new FileUploadResult();
|
||||
// PrintWriter writer = response.getWriter();
|
||||
// String sessionID = request.getSession().getId();
|
||||
String sessionID = request.getSession().getId();
|
||||
|
||||
if ( file == null)
|
||||
if ( uploadFile == null )
|
||||
{
|
||||
result.setSuccess( false );
|
||||
result.setMessage( "请用于上传文件！" );
|
||||
|
||||
return result;
|
||||
}
|
||||
else
|
||||
|
||||
if ( uploadFile.isEmpty() )
|
||||
{
|
||||
result.setSuccess( true );
|
||||
result.setFilePath( file.getOriginalFilename() );
|
||||
result.setSuccess( false );
|
||||
result.setMessage( "上传空文件！" );
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// 使用sessionID来作为存放的目录
|
||||
String rootPath = request.getServletContext().getRealPath( "/" + sessionID );
|
||||
String fileName = uploadFile.getOriginalFilename();
|
||||
|
||||
File destFile = new File( rootPath, fileName );
|
||||
|
||||
// 判断路径是否存在，不存在就创建。
|
||||
if ( !destFile.getParentFile().exists() )
|
||||
{
|
||||
// 创建路径
|
||||
if ( !destFile.getParentFile().mkdirs() )
|
||||
{
|
||||
// 如果创建路径失败
|
||||
result.setSuccess( false );
|
||||
result.setMessage( "创建存放路径失败，请联系开发人员！" );
|
||||
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
uploadFile.transferTo( destFile );
|
||||
|
||||
result.setSuccess( true );
|
||||
result.setFilePath( destFile.getPath() );
|
||||
result.setMessage( "上传成功！" );
|
||||
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: Kane
|
||||
* @Date: 2022-09-28 23:43:42
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-09-29 00:16:20
|
||||
* @LastEditTime: 2022-09-29 22:29:13
|
||||
* @FilePath: \car_dealer\src\main\java\com\cpic\xim\car_dealer\controllers\fileupload\FileUploadResult.java
|
||||
* @Description:
|
||||
*
|
||||
@ -24,6 +24,9 @@ public class FileUploadResult
|
||||
@JsonProperty( "file_path" )
|
||||
private String filePath;
|
||||
|
||||
@JsonProperty( "message" )
|
||||
private String message;
|
||||
|
||||
public FileUploadResult()
|
||||
{}
|
||||
|
||||
@ -45,5 +48,15 @@ public class FileUploadResult
|
||||
public void setFilePath( String filePath )
|
||||
{
|
||||
this.filePath = filePath;
|
||||
};
|
||||
}
|
||||
|
||||
public String getMessage()
|
||||
{
|
||||
return message;
|
||||
}
|
||||
|
||||
public void setMessage( String message )
|
||||
{
|
||||
this.message = message;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,4 +18,9 @@
|
||||
<property name="suffix" value=".jsp" />
|
||||
</bean> -->
|
||||
|
||||
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
|
||||
<!-- <property name="defaultEncoding" value="UTF-8" /> -->
|
||||
<property name="maxUploadSize" value="5000000" />
|
||||
</bean>
|
||||
|
||||
</beans>
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: Kane
|
||||
* @Date: 2022-09-29 16:33:30
|
||||
* @LastEditors: Kane
|
||||
* @LastEditTime: 2022-09-29 16:47:19
|
||||
* @LastEditTime: 2022-09-30 00:33:12
|
||||
* @FilePath: \car_dealer\src\main\webapp\file_upload.html
|
||||
* @Description:
|
||||
*
|
||||
@ -21,28 +21,71 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<form enctype="multipart/form-data">
|
||||
<form
|
||||
action="http://localhost:8080/cardealer/upload"
|
||||
id="uploadform"
|
||||
enctype="multipart/form-data"
|
||||
method="post"
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
name="upload"
|
||||
name="uploadFile"
|
||||
id="upload"
|
||||
style="display: none"
|
||||
onchange="fileUploadChange()"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="upload_text"
|
||||
readonly
|
||||
onclick="upload.click()"
|
||||
value="12345"
|
||||
name="test"
|
||||
style="display: none"
|
||||
/>
|
||||
</form>
|
||||
<button>上传</button>
|
||||
<input
|
||||
type="text"
|
||||
id="upload_text"
|
||||
readonly
|
||||
onclick="upload.click()"
|
||||
/>
|
||||
<button id="btnUpload">上传</button>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const reqeustURL = "http://localhost:8080/cardealer/upload";
|
||||
const btnUpload = document.getElementById("btnUpload");
|
||||
|
||||
function fileUploadChange() {
|
||||
document.getElementById("upload_text").value =
|
||||
document.getElementById("upload").value;
|
||||
}
|
||||
|
||||
btnUpload.onclick = function (event) {
|
||||
const uploadForm = document.getElementById("uploadform");
|
||||
const form = new FormData(uploadForm);
|
||||
|
||||
//form.append("myfile", file);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.upload.onprogress = function (event) {
|
||||
if (event.lengthComputable) {
|
||||
let percent = Math.round(
|
||||
(event.loaded * 100) / event.total,
|
||||
);
|
||||
|
||||
console.log("上传进度:" + percent);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onload = function (event) {
|
||||
//let result = JSON.parse(xhr.responseText);
|
||||
|
||||
console.log(xhr.responseText);
|
||||
//console.log(result);
|
||||
};
|
||||
|
||||
xhr.open("post", reqeustURL, true);
|
||||
xhr.send(form);
|
||||
};
|
||||
</script>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user