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 ...
随机推荐
- webstorm快捷键汇总
查找替换 Webstorm快捷键 Eclipse快捷键 说明 ctrl+shift+N ctrl+shift+R 通过文件名快速查找工程内的文件(必记) ctrl+shift+alt+N ctrl+s ...
- MySQL Disk--SSD 特性
======================================================================= SSD 特性 .随机读能力非常好,连续读性能一般,但比普 ...
- leetcode:Count and Say【Python版】
一次AC 字符串就是:count+char class Solution: # @return a string def countAndSay(self, n): str = " for ...
- junit 知识点
JUnit 测试框架具有以下重要特性: 测试工具 测试套件 测试运行器 测试分类 测试工具 测试工具是一整套固定的工具用于基线测试.测试工具的目的是为了确保测试能够在共享且固定的环境中运行,因此保证测 ...
- PHP 短连接生成算法
短连接生成类: <?php #短连接生成算法 class Short_Url { #字符表 public static $charset = "0123456789ABCDEFGHIJ ...
- 使用nat123实现远程桌面
使用nat123实现动态IP或无公网IP时外网访问内网固定端口 使用环境:window7 1.安装nat123软件, 下载地址为 http://www.nat123.com/Pages_2_32.js ...
- ES(4): ES Cluster Security Settings
目录: ES安全事件回顾 ES集群安全建议 安全访问配置 license更新 ES安全事件回顾 下面是白帽汇监测到针对全球使用广泛的全文索引引擎Elasticsearch的勒索事件: 2017年1月1 ...
- thinkphp.2 thinkphp5微信支付 微信公众号支付 thinkphp 微信扫码支付 thinkphp 微信企业付款5
前面已经跑通了微信支付的流程,接下来吧微信支付和微信企业付款接入到thinkphp中,版本是3.2 把微信支付类.企业付款类整合到一起放到第三方类库,这里我把微信支付帮助类和企业付款类放到同一个文件了 ...
- [转] Maven.pom.xml 配置示例
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- WAP网站WML或HTML页面自适应手机屏幕实现方法
把图片和div的宽度都设置成:width:100%就可以了