CPICXIM/car_deal_util
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实现异步文件上传功能！

Browse Source
This commit is contained in:
Kane
2022-09-30 00:41:42 +08:00
parent 0a22d33d78
commit c41bcc6a35
5 changed files with 130 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
code/java/car_dealer/pom.xml
View File

@@ -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>

58
code/java/car_dealer/src/main/java/com/cpic/xim/car_dealer/controllers/fileupload/FileUploadController.java
View File

@@ -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;
}
}

17
code/java/car_dealer/src/main/java/com/cpic/xim/car_dealer/controllers/fileupload/FileUploadResult.java
View File

@@ -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;
}
}

5
code/java/car_dealer/src/main/webapp/WEB-INF/classes/spring.xml
View File

@@ -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>

57
code/java/car_dealer/src/main/webapp/file_upload.html
View File

@@ -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>