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 单文件和多文件上传 )的更多相关文章

  1. django 基于form表单上传文件和基于ajax上传文件

    一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...

  2. SpringMVC上传压缩文件，解压文件，并检测上传文件中是否有index.html

    SpringMVC上传压缩文件,解压文件,并检测上传文件中是否有index.html 说明: 1.环境:SpringMVC+Spring+Tomcat7+JDK1.7 2.支持 zip和rar格式的压 ...

  3. [html5+java]文件异步读取及上传核心代码

    html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...

  4. 关于vue+element对ie9的兼容el-upload不支持在IE9上传

    关于vue+element对ie9的兼容el-upload不支持在IE9上传 https://lian-yue.github.io/vue-upload-component/#/zh-cn/ 解决方案 ...

  5. 文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）

    服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...

  6. SpringMVC实现多文件（批量）上传

    1.springMVC实现多文件上传需要的包如图2.webroot下的结构如图所示 3.java代码: package cn.lxc.controller; import java.io.File; ...

  7. java：工具（汉语转拼音，压缩包，EXCEL，JFrame窗口和文件选择器，SFTP上传下载，FTP工具类，SSH）

    1.汉语转拼音: import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j.format.HanyuP ...

  8. SpringMVC中对多部件类型解析---文件（图片）上传

    加入上传图片jar包 commons-io-2.4.jar commons-fileupload-1.3.jar 在页面form中提交enctype="multipart/form-data ...

  9. 【docker】将Java jar文件生成镜像、上传镜像并生成镜像压缩文件

    概述 将Springboot的web服务打包成Jar包后,自动化脚本将jar打包成镜像.上传镜像.并生成镜像的压缩文件: Dockerfile FROM 10.254.9.21/library/ora ...

随机推荐

  1. 实验吧—隐写术——WP之 欢迎来到地狱

    解压压缩包后出现三个文件.jpg .zip .docx 发现图片打开不显示,用winhex打开发现缺少文件头,将jpg的文件头补上 保存后图片可以打开 是一个百度网盘的链接,注意l和1的区别,网盘里是 ...

  2. 1、ECMAScript 6 简介

    ECMAScript 和 JavaScript 的关系 ES6 与 ECMAScript 2015 的关系 语法提案的批准流程 ECMAScript 的历史 部署进度 Babel 转码器 Traceu ...

  3. V4L2驱动内核文档翻译（一）

    随着一些视频或者图像硬件的复杂化,V4L2驱动也越来越趋于复杂.许多硬件有多个IC,在/dev下生成多个video设备或者其他的诸如,DVB,ALSA,FB,I2C ,IR等等非V4L2的设备.所以, ...

  4. MySQL--修改MySQL账号密码

    ##使用mysqladmin进行修改 mysqladmin -u username -h hostname password 'new password'; ##使用set命令进行修改 SET PAS ...

  5. stardog 基本试用(社区版)

    stardog 是一个知识图谱的实现,实现了sparql 以及graphql 协议,使用起来也比较简单,官方文档挺全 下载 社区版,注册之后会有邮件通知,里面会包含license 以及软件包 下载地址 ...

  6. 【转】每天一个linux命令（13）：less 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/05/2754477.html less 工具也是对文件或其它输出进行分页显示的工具,应该说是lin ...

  7. System V 消息队列 实例

    前言: 消息队列是消息的链接表,存放在内核中,并由消息队列标识符标识.我们将称消息队列为 “队列”,其标识符为“队列I D”.msgget创建一个新队列或打开一个存在的队列; msgsnd向队列末端添 ...

  8. [记录]js跨域调用mvc ActionResult扩展

    背景 最近2个项目中都用到了js跨域访问的知识,2个项目都需要主站与各个分站之间进行数据交互.状态同步等相关操作.浏览器本身是不允许进行跨域访问,在MVC中我们可以扩展一个方法来实现这个功能.在此大家 ...

  9. 新玩具，React v16.7.0-alpha Hooks

    周五看见React v16.7.0-alpha Hooks,今早起来看见圈里已经刷屏了Hooks,正好周末,正好IG和G2的比赛还没开始,研究下... 刚刚接触react时候非常喜欢用函数式组件,因为 ...

  10. 杂项：ORM

    ylbtech-杂项:ORM 对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不 ...