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. CTF-练习平台-Misc之 这么多数据包

    十一.这么多数据包 下载文件后解压,用wireshark打开CTF.pcapng,发现有很多包,快速浏览后发现前面都是攻击机(192.168.116.138)在向目标机(192.168.116.159 ...

  2. 【网络编程】socket异常

    Socket异常 客户端异常 java.net.ConnectException: Connection refused: connect. 该异常发生在客户端进行new Socket(ip, por ...

  3. gtx860M,cuda9路1080p多高斯运动检测测试

    多高斯背景差分,非常吃cpu,特别是多路视屏,所以想用gpu做检测 后面的跟踪一系列的规则判断用cpu opencv+cuda+stl做了个测试 代码: // MTTestCudaMog.cpp : ...

  4. IE7下对某些seajs压缩文件不兼容的解决方法

    seajs.config({ comboExcludes: /common.js/ }) (杨磊哥提供)

  5. 转 Katana 项目入门

    Katana 项目入门 Howard Dierking 当 ASP.NET 首次在 2002 年发布时,时代有所不同. 那时,Internet 仍处于起步阶段,大约有 5.69 亿用户,每个用户平均每 ...

  6. Tensoflw.js - 02 - 模型与内存管理（易懂）

    Tensoflw.js - 02 - 模型与内存管理(易懂) 参考 W3Cschool 文档:https://www.w3cschool.cn/tensorflowjs/ 本文主要翻译一些英文注释,添 ...

  7. cocos2dx学习资料

    [9秒原创]cocos2d-x——CCScrollView用法 http://www.9miao.com/thread-45619-1-1.html [9秒原创]cocos2d-x——场景切换效果示例 ...

  8. 嵌入式Linux软件工程师面试题一

    题一,同步和异步有啥区别? 题二,TCP与UDP有啥区别? 题三,进程和线程有啥区别? 题一答案: 同步(Sync):所有的操作都做完,才返回给用户.这样用户在线等待的时间太长,给用户一种卡死了的感觉 ...

  9. yarn 制作 npm 包

    yarn publish yarn info [package_name]

  10. EXPLAIN执行计划中要重点关注哪些要素(转)

    EXPLAIN的结果中,有哪些关键信息值得注意呢? MySQL的EXPLAIN当然和ORACLE的没法比,不过我们从它输出的结果中,也可以得到很多有用的信息. 总的来说,我们只需要关注结果中的几列: ...