您的位置：首页 > 编程语言 > Java开发

SpringMVC + FormDate + Vue + file表单 ( 实现 js 单文件和多文件上传 )

2017-07-06 14:14 876 查看

JS 部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<script src="../js/commom.js"></script>
<script src="../js/awi.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/jquery.js"></script>
<style type="text/css">
html, body{ padding: 0; margin: 0 }
#header{
position: fixed;
overflow: hidden;
top: 0;
width: 720px;
height: 88px;
background: #FF0000;
}
.header_back{
float: left;
width: 100px;
font-size: 50px;
color: white;
height: 88px;
line-height: 80px;
text-indent: 30px;
}
.header_title{
float: left;
width: 520px;
height: 88px;
line-height: 88px;
font-size: 36px;
text-align: center;
color: white;
font-weight: bold;
}
#box {
width: 720px;
margin: 88px 0 0 0;
}
.img-list {
width: 720px;
}
.img-list > img, .img-select, .file-select {
display: block;
width: 720px;
height: 500px;
}
.file-select {
margin: -500px 0 0 0;
opacity: 0;
}
.file-send {
width: 720px;
height: 100xp;
text-align: center;
line-height: 100px;
background: #000000;
color: white;
font-size: 36px;
}
</style>
</head>
<body>
<div id="header">
<div class="header_back"><</div>
<div class="header_title">文件上传</div>
</div>
<div id="box">
<div class="img-list">
<img v-for="img in imgArr" :src="img" />
</div>
<img class="img-select" src="../img/001.png" />
<input class="file-select" type="file" multiple="multiple" />
<input class="file-send" type="button" value="发送" />
</div>
</body>
<script type="text/javascript">

var vm = new Vue({
data: {
imgArr: []
}
}).$mount('#box');

var formData = new FormData();
$('.file-select').on('change', function(){
var files = this.files;
var imgArr = [];
for(var i = 0; i < files.length; i++){
imgArr[i] = awi.fileToDataUrl(files[i]);
formData.append('file', files[i]);
}
vm.imgArr = imgArr;
console.dir(formData)
});

$('.file-send').on('click', function(){
var xhr = new XMLHttpRequest();
xhr.onerror = function(err){
console.error("上传失败!" + err.message);
}
xhr.onload = function(){
console.log(xhr.responseText);
}
xhr.open("POST", http + 'file/more_upload');
xhr.send(formData);
});

</script>
</html>

JAVA 代码

package controller.home;

import java.io.File;
import java.io.Writer;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

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.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.alibaba.fastjson.JSON;

@Controller
@CrossOrigin // 允许跨域
@RequestMapping("/file")
public class FileController {

// 单文件上传
@RequestMapping(value = "/upload", method = {RequestMethod.POST})
public void upload(
@RequestParam("file") MultipartFile file,
HttpServletRequest req,
Writer writer
) throws Exception{
// 获取项目文件保存目录路径
String projectPath = req.getServletContext().getRealPath("WEB-UD") + "/";
// 获取真实存放的相对路径
String relativePath = new Date().getTime() + file.getOriginalFilename();
// 实例化文件对象, 并判断是否存在, 不存在创建目录
File filePath = new File(projectPath + relativePath);
if (!filePath.exists()) {
filePath.mkdirs();
}
// 接收并保存文件
file.transferTo(filePath);
writer.write(relativePath);
}

// 多文件上传
@RequestMapping(value = "/more_upload", method = {RequestMethod.POST})
public void moreUpload(
@RequestParam("file") MultipartFile[] files,
HttpServletRequest req,
Writer writer
) throws Exception{
// 获取项目文件保存目录路径
String projectPath = req.getServletContext().getRealPath("WEB-UD") + "/";
// 定义存放地址
List<String> relativePathArr = new ArrayList<String>();
// 循环文件数组
for(MultipartFile file : files){
// 获取存放的相对路径
String relativePath = new Date().getTime() + file.getOriginalFilename();
// 实例化文件对象, 并判断是否存在, 不存在创建目录
File filePath = new File(projectPath + relativePath);
if (!filePath.exists()) {
filePath.mkdirs();
}
// 接收并保存文件
file.transferTo(filePath);
relativePathArr.add(relativePath);
}
writer.write(JSON.toJSONString(relativePathArr));
}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航