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 ...
随机推荐
- Jersey RESTful Web服务
Jersey是一个RESTFUL请求服务JAVA框架,与常规的JAVA编程使用的struts框架类似,它主要用于处理业务逻辑层.与Struts类似,它同样可以和hibernate,spring框架整合 ...
- /etc/inittab 学习
1.文件内容 2.内容讲解 http://www.2cto.com/os/201108/98426.html init的进程号是1(ps -aux | less),从这一点就能看出,init进程是系统 ...
- POSIX 线程具体解释（3-相互排斥量："固定加锁层次"/“试加锁-回退”）
有时一个相互排斥量是不够的: 比方: 当多个线程同一时候訪问一个队列结构时,你须要2个相互排斥量,一个用来保护队列头,一个用来保护队列元素内的数据. 当为多线程建立一个树结构时.你可能须要为每一个节点 ...
- JUC集合之 CopyOnWriteArrayList
CopyOnWriteArrayList介绍 它相当于线程安全的ArrayList.和ArrayList一样,它是个可变数组:但是和ArrayList不同的时,它具有以下特性: 它最适合于具有以下特征 ...
- JZ2440 裸机驱动 第9章 中断体系结构
本章目标: 了解ARM体系CPU的7种工作模式 了解S3C2410/S3C2440中断体系结构 掌握S3C2410/S3C2440的中断服务程序的编写方法 9.1 S3C241 ...
- linux vnc 安装
http://blog.csdn.net/mchdba/article/details/49306383
- gdb 调试（设置变量）（六）
一旦使用GDB挂上被调试程序,当程序运行起来后,你可以根据自己的调试思路来动态地在GDB中更改当前被调试程序的运行线路或是其变量的值,这个强大的功能能够让你更好的调试你的程序,比如,你可以在程序的一次 ...
- gcc gdb调试 (二)
GDB的命令概貌——————— 启动gdb后,就你被带入gdb的调试环境中,就可以使用gdb的命令开始调试程序了,gdb的命令可以使用help命令来查看,如下所示: /home/hchen> g ...
- php语言介绍分析
1,胡说八道 php设计专门用于web开发的编程语言,易学易用得到广泛应用的同时也饱受诟病,简单易学使得初学者用最短的时间很容易实现自己的WEB站点,且开源项目丰富,是中小型公司热衷的选择.但是,随着 ...
- redis通过dump.db文件 进行数据替换 复制
进行数据替换无非就是三步, 杀掉redis进程 ------------> 复制 dump.db文件 ------------------>启动redis pkill redis-se ...