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. [团队项目]SCRUM项目6.0 7.0

    6.0----------------------------------------------------- sprint演示 1.坚持所有的sprint都结束于演示. 团队的成果得到认可,会感觉 ...

  2. Make menuconfig生成文件

    1.当我们在执行make menuconfig这个命令时,一共涉及到了以下几个文件: Linux内核根目录下的scripts文件夹 arch/$ARCH/Kconfig文件.各层目录下的Kconfig ...

  3. adnanh webhook 框架使用

    adnanh webhook 支持以下功能: 接收请求 解析header 以及负载以及查询变量 规则检查 执行命令 简单测试 使用docker-compose docker-compose 文件 ve ...

  4. Cocos2d-x 2.2.3 使用NDK配置编译环境

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/wwj_748/article/details/30072379 Cocos2d-x 2.2.3 使用 ...

  5. WebApi_基于Token的身份验证——JWT

    JWT是啥? JWT就是一个字符串,经过加密处理与校验处理的字符串,形式为: A.B.C A由JWT头部信息header加密得到B由JWT用到的身份验证信息json数据加密得到C由A和B加密得到,是校 ...

  6. MSDN Windows XP Professional x64 Edition with SP2 +VL简体中文语言包+序列号

    [资源名称]---Windows XP Professional x64 Edition with SP2 - VL (English)[资源类型]---ISO镜像[资源语言]---英语+简体中文[杀 ...

  7. Tomcat7 catalina.out 日志分割

    Tomcat7 catalina.out 日志分割 安装过程如下: 1.下载(最新版本)  cronolog-1.6.2.tar.gz 2.解压缩     # tar zxvf cronolog-1. ...

  8. Oracle ASM 详解

    ASM:Automatic Storage Management, 是Oracle 主推的一种面向Oracle的存储解决方案, ASM 和 RDBMS 非常相似,ASM 也是由实例和文件组成, 也可以 ...

  9. PHP查找中文字符的解决方案

    在PHP中查找中文字符,有两种方案.1.中文字符是gbk(gb2312)有两种解决方法第一种:将PHP保存为ASCII编码,然后使用strpos查找,如:strpos($curl_res, ‘哈哈’) ...

  10. Dynamics CRM 2011 怎么根据记录的etc参数值找到实体英文名和根据etc参数值或英文名称找到其实体中文名称

    一.平常我们可以打开CRM2011一条已创建的记录,通过JScript方法获取实体英文名的方法是:按F12,输入contentIFrame.Xrm.Page.data.entity.getEntity ...