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. LeetCode-Microsoft-Clone Graph

    Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. OJ's ...

  2. day37 mysql数据库学习

    3.什么是数据库 用来存储数据的仓库 数据是以文件的形式保存 海峰补充内容   ↓ 4 数据库服务器.数据管理系统.数据库.表与记录的关系(重点理解!!!) 记录:1 刘海龙  324245234 2 ...

  3. day25 python学习 继承，钻石继承 多态

    ---恢复内容开始--- 通过一个列子认识父类和子类中,子类的如何实现对父类默认属性调用,同时拥有自己的属性,如何在子类中调用父类的方法,class Ainmal: country='afdas' d ...

  4. mysql和redis加入到windows服务

    mysql加入到windows服务: mysqld --install  Mysql5.6 mysqld --remove mysql5.6  从windows的服务中删除mysql服务 net st ...

  5. MongoDB初试备份及恢复

    MongoDB作为文档数据库,有 1.登录MongoDB官网,地址:https://www.mongodb.com/download-center#community  , 根据自己操作系统下载相应版 ...

  6. Hadoop之 Balancer平衡速度

    1. dfs.datanode.max.transfer.threads 修改dfs.datanode.max.transfer.threads=4096 (如果运行HBase的话建议为16384), ...

  7. react 知识点

    1.react内联样式写法: <div style={{width:'200px',height:'100px',border:'1px solid red'}}> </div> ...

  8. WinForm 窗体间参数传递

    http://www.cnblogs.com/xinjian/archive/2011/09/15/2177851.html 本人刚刚接触Winform ,学习之后分享下心得. winform 窗体与 ...

  9. Spring Cloud 入门 之 Config 篇（六）

    原文地址:Spring Cloud 入门 之 Config 篇(六) 博客地址:http://www.extlight.com 一.前言 随着业务的扩展,为了方便开发和维护项目,我们通常会将大项目拆分 ...

  10. php中is_null,empty,isset,unset 的区别详细介绍

    is_null, empty, isset, unset 我们先来看看这4个函数的描述. isset 判断变量是否已存在(配置)unset 把变量删除(释放)掉empty 判断变量是否为空is_nul ...