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. python 直接将list 整体转化-----------map()

    假设有这样一个 results = ['1', '2', '3'] 转化为下面这个样子 results = [1, 2, 3] 我们可以使用map函数 在Python2中这样操作: results = ...

  2. sql 变量赋值

    mysql 的变量赋值如下: set @name='app' ; or set @name:='appfirst'; or with select select @appname:='you name ...

  3. FastAdmin 开发第三天：认识目录

    以下为标准 FastAdmin 安装后的目录 我们在运行命令时都是在这个目录. 我们所有的命令都在这个目录下面运行. 比如:安装前端组件,bower install 安装php 组件 composer ...

  4. 虚拟机 VMware Tools 安装

    Ubuntu 或具有图形用户界面的 Ubuntu Server 要挂载 CD 镜像并解压,请按以下步骤操作: 启动此虚拟机. 使用具有管理员权限或 root 用户权限的帐户登录此虚拟机. 选择:对于F ...

  5. C#调用Python脚本的简单示例

    C#调用Python脚本的简单示例 分类:Python (2311)  (0)  举报  收藏 IronPython是一种在 .NET及 Mono上的 Python实现,由微软的 Jim Huguni ...

  6. Robots.txt 编写

    搜索引擎Robots协议,是放置在网站根目录下robots.txt文本文件,在文件中可以设定搜索引擎蜘蛛爬行规则.设置搜索引擎蜘蛛Spider抓取内容规则.下面Seoer惜缘举例robots写法规则与 ...

  7. Windows Server 2008 R2 3389端口更改

    Windows Server 2008 R2 3389端口更改 2016-04-28 23:08 4734人阅读 评论(0) 收藏 举报  分类: Windows(61)  版权声明:本文为博主原创文 ...

  8. git提交忽略不必要的文件或文件夹

    创建maven项目,使用git提交,有时需要忽略不必要的文件或文件夹,只保留一些基本. 例如如下截图,实际开发中我们只需提交:src,.gitignore,pom.xml 而自己项目文件一般都保留,但 ...

  9. bzoj1066 蜥蜴

    Description 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到平 ...

  10. 转转转！！java基础一些静态代码块等知识点

    一.代码块: 构造代码块------类中方法的外面:每次调用构造方法都执行: 静态代码块------类中方法的外面,括号前加上static:只执行一次,随着类的加载而执行: static代码块.构造代 ...