JAVA SpringMVC + FormDate + Vue + file表单 ( 实现 js 单文件和多文件上传 )
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));
}
}
JAVA SpringMVC + FormDate + Vue + file表单 ( 实现 js 单文件和多文件上传 )的更多相关文章
- django 基于form表单上传文件和基于ajax上传文件
一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...
- SpringMVC上传压缩文件，解压文件，并检测上传文件中是否有index.html
SpringMVC上传压缩文件,解压文件,并检测上传文件中是否有index.html 说明: 1.环境:SpringMVC+Spring+Tomcat7+JDK1.7 2.支持 zip和rar格式的压 ...
- [html5+java]文件异步读取及上传核心代码
html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...
- 关于vue+element对ie9的兼容el-upload不支持在IE9上传
关于vue+element对ie9的兼容el-upload不支持在IE9上传 https://lian-yue.github.io/vue-upload-component/#/zh-cn/ 解决方案 ...
- 文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）
服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...
- SpringMVC实现多文件（批量）上传
1.springMVC实现多文件上传需要的包如图2.webroot下的结构如图所示 3.java代码: package cn.lxc.controller; import java.io.File; ...
- java：工具（汉语转拼音，压缩包，EXCEL，JFrame窗口和文件选择器，SFTP上传下载，FTP工具类，SSH）
1.汉语转拼音: import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j.format.HanyuP ...
- SpringMVC中对多部件类型解析---文件（图片）上传
加入上传图片jar包 commons-io-2.4.jar commons-fileupload-1.3.jar 在页面form中提交enctype="multipart/form-data ...
- 【docker】将Java jar文件生成镜像、上传镜像并生成镜像压缩文件
概述 将Springboot的web服务打包成Jar包后,自动化脚本将jar打包成镜像.上传镜像.并生成镜像的压缩文件: Dockerfile FROM 10.254.9.21/library/ora ...
随机推荐
- SQLite数据库学习小结——Frameworks层实现
3. SQLite的Frameworks层实现 3.1 Frameworks层架构 Android系统方便应用使用,在Frameworks层中封装了一套Content框架,之所以叫Content框架而 ...
- && 和 || 运算
a() && b() :如果执行a()后返回true,则执行b()并返回b的值:如果执行a()后返回false,则整个表达式返回a()的值,b()不执行: a() || b() :如果 ...
- Pma模块详解，对用户登录linux等进行限制，密码修改限制等
PAM详细介绍 2014-04-02 09:26:41 标签:PAM 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://lidefu ...
- solr相关
http://www.cnblogs.com/arli/ 博主介绍: 武汉理工大学计算机系 华为java工程师 华为企业版Hadoop工程师 华为大数据解决方案架构师 国盛天丰软件工程师
- adnanh webhook 框架 hook rule
adnanh webhook 支持一系列的逻辑操作 AND 所有的条件都必须匹配 { "and": [ { "match": { "type" ...
- vue-cli 引入阿里巴巴字体图标：注意点
vue-cli 引入阿里巴巴字体图标:注意点 下载的 iconfont.css 文件中: .iconfont { font-family:"iconfont" !important ...
- java中<load-on-startup>含义
java中 load-on-startup 含义 java中的 load-on-startup 用于表示该servlet是否在servlet容器启动的时候加载. 示例: <load-on-sta ...
- centos7 lvs keepalived做DNS集群负载
2LVS + keepalived 5 bind dns源站 yum -y install ipvsadm keepalived lvs增加并发 echo "options ip_vs c ...
- Git密钥生成步骤SSH Key
顺便推荐下自己的网站: 一个php后台极速开发框架 https://www.lotusadmin.top/ 一个有趣的网站 https://www.waytomilky.com/ Git是分布式的代码 ...
- Mono.Cecil 修改目标.NET的IL代码保存时报异常的处理。
使用Mono.Cecil对目标.NET的DLL程序进行IL修改后保存时报“Failed to resolve assembly: ' xxxxxx, version=xxxxx,Culture=xxx ...