第一步：spring-web.xml

 <!--配置上传下载-->

    <bean id="multipartResolver" class="org.springframework.web.multipart.support.StandardServletMultipartResolver" />

第二步：后台

@RequestMapping(value = "/bbbbb", method = RequestMethod.POST)

    public String imageshangchuan(@RequestPart("xxx") MultipartFile multipartFile, Model model, HttpServletRequest request) {

        if (!multipartFile.getContentType().contains("image/")) {

            model.addAttribute("err", "只能是图片文件！");

            return "/inputfile";

        }

        if (multipartFile.getSize() > 1024 * 1024 * 5) {

            model.addAttribute("err", "只能是5M以下！");

            return "/inputfile";

        }

        //取得相对路径

        String basePath = request.getServletContext().getRealPath("/img");

        String rekativePath;

        try {

            rekativePath = makeImagePath(basePath, multipartFile.getOriginalFilename());

            File file = new File(rekativePath);

            file.getParentFile().mkdir();

            multipartFile.transferTo(file);

        } catch (IOException e) {

            model.addAttribute("err", "上传失败，请重试");

            return "/inputfile";

        }

        return "/index";

        }

        public String makeImagePath (String basePath, String fileName){

            Date date = new Date();

            String[] filename = simpleFile(fileName);

            return String.format("%s%s%s%supload_%s_%s.%s",

                    basePath,

                    File.separator,

                    new SimpleDateFormat("yyyyMMdd").format(date),

                    File.separator,

                    filename[0],

                    new SimpleDateFormat("hhmmss").format(date),

                    filename[1]

            );

        }

        public String[] simpleFile (String file){

            int sum = file.lastIndexOf(".");

            return new String[]{

                    file.substring(0, sum),

                    file.substring(sum + 1)

            };

        }

第三步：web.xml

<multipart-config>

    <max-file-size>102400</max-file-size>

</multipart-config>

第四步：jsp

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Title</title>

</head>

<body>

<form:form action="/bbbbb" method="post" enctype="multipart/form-data">

    <div style="color: red">

            ${err}

    </div>

    <input type="file" name="xxx" />

    <input type="submit"/>

</form:form>

</body>

</html>

运行测试

使用ajax

js

  function asdsa() {

        var formData = new FormData();

        formData.append("xxx",document.getElementById("myfile").files[0]);

        $.ajax({

            url: '/bbbbb',

            type: 'POST',

            Accept: 'text/html;charset=UTF-8',

            cache: false,

            contentType:false,

            data:formData,

            processData: false,

            xhr: function () {

                myXhr = $.ajaxSettings.xhr();

                console.log(myXhr.upload);

                if (myXhr.upload) {

                    myXhr.upload.addEventListener('progress', function (e) {

                        console.log(e);

                        var loaded = e.loaded;//已经上传大小情况

                        var tot = e.total;//附件总大小

                        var per = Math.floor(100 * loaded / tot);  //已经上传的百分比

                        console.log('附件总大小 = ' + loaded);

                        console.log('已经上传大小 = ' + tot);

                    }, false);

                }

                return myXhr;

            }, success: function (data) {

                console.log(data);

                console.log("上传成功!!!!");

            }, error: function () {

                console.log("上传失败！");

            }

        });

    }

jsp

<%--

  Created by IntelliJ IDEA.

  User: Administrator

  Date: 2018/11/6

  Time: 20:00

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>$Title$</title>

</head>

<script src="css/jquery-1.11.3.js"></script>

<script>

    $(function () {

        $.get("login.html", {name: "John", time: "2pm"},

            function (data) {

                console.log(data);

            });

    })

</script>

<body>

<h1>测试</h1>

<button onclick="asdsa()">测试</button>

<meter id="p1" value="60" max="100">60%</meter>

<input id="myfile" type="file" multiple="multiple"/>

<progress id='progress' style='width:100px' value='0' max='100'>3/10</progress>

<audio controls="controls" src="mp3/白小白%20-%20最美情侣.mp3"/>

<img id="imd" src=""/>

<script>

    function asdsa() {

        var formData = new FormData();

        formData.append("xxx",document.getElementById("myfile").files[0]);

        $.ajax({

            url: '/bbbbb',

            type: 'POST',

            Accept: 'text/html;charset=UTF-8',

            cache: false,

            contentType:false,

            data:formData,

            processData: false,

            xhr: function () {

                myXhr = $.ajaxSettings.xhr();

                console.log(myXhr.upload);

                if (myXhr.upload) {

                    myXhr.upload.addEventListener('progress', function (e) {

                        console.log(e);

                        var loaded = e.loaded;//已经上传大小情况

                        var tot = e.total;//附件总大小

                        var per = Math.floor(100 * loaded / tot);  //已经上传的百分比

                        console.log('附件总大小 = ' + loaded);

                        console.log('已经上传大小 = ' + tot);

                    }, false);

                }

                return myXhr;

            }, success: function (data) {

                console.log(data);

                console.log("上传成功!!!!");

            }, error: function () {

                console.log("上传失败！");

            }

        });

    }

    function da() {

        var files = document.getElementById("myfile").files[0];

        var read = new FileReader();

        read.readAsDataURL(files);

        read.onprogress = function (ev) {

        }

        read.onload = function (ev) {

            var c = document.getElementById("p1");

            c.value = 100;

            progress.value = 50;

            var c = document.getElementById("imd");

            c.src = ev.target.result;

            progress.value = 100;

        }

    ;

    }

</script>

</body>

</html>

项目地址：https://github.com/weibanggang/Picture

ajax(form)图片上传（spring）的更多相关文章

  1. php form 图片上传至服务器上

    本文章也是写给自己看的,因为写的很简洁,连判断都没有,只是直接实现了能上传的功能. 前台: <form action="upload.php" method="PO ...

  2. python - django 使用ajax将图片上传到服务器并渲染到前端

    一.前端代码 <!doctype html> <html lang="en"> <head> <meta charset="UT ...

  3. Ajax实现文件上传(Spring MVC)

    ## 前端表单 和 JQuery jsp/html代码 使用JQuery <script src="static/js/jquery-3.4.1.js"></sc ...

  4. 一般处理程序、Ajax多图片上传带进度条

    <!DOCTYPE html><html><head>    <meta charset="utf-8" />    <tit ...

  5. ajax多图片上传demo

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  6. jquery Ajax 实现图片上传的功能。

    $('#image').on('change', function () {         var url = "";         var form = new FormDa ...

  7. ajax实现图片上传

    1.创建formData表单,模拟表单传递数据(formData有兼容性问题) var formData = new FormData();2.获取到相应的元素 var jobName = $(&qu ...

  8. struts2 使用ajax进行图片上传

    第一步:引入一个插件    jquery.form.js /*! * jQuery Form Plugin * version: 3.36.0-2013.06.16 * @requires jQuer ...

  9. jquery php ajax多图片上传.上传进度,生成缩略图

    本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件 下载地址为www.freejs.net/demo/91/down.zip 演示 J ...

随机推荐

  1. java——java只有值传递

    真的只有值传递! java中对象作为参数传递给一个方法,到底是值传递,还是引用传递? 答:值传递 这里说的很清楚了:https://www.cnblogs.com/zhouxiansheng/p/39 ...

  2. 利用vue-cli搭建vue项目

    手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...

  3. css内容整理1

    1.css引入的四种方式1.行内2.内嵌3.链接 <link href="1.css" rel="stylesheet">4.导入@import u ...

  4. 基于HTTP协议之WEB消息实时推送技术原理及实现

    很早就想写一些关于网页消息实时推送技术方面的文章,但是由于最近实在忙,没有时间去写文章.本文主要讲解基于 HTTP1.1 协议的 WEB 推送的技术原理及实现.本人曾经在工作的时候也有做过一些用到网页 ...

  5. [转]Java内存溢出详解及解决方案

    原文地址:http://blog.csdn.net/xianmiao2009/article/details/49254391 内存溢出与数据库锁表的问题,可以说是开发人员的噩梦,一般的程序异常,总是 ...

  6. Container&injection(容器与注入思想)

    container 为了更好理解JAVA容器,查询了容器的概念以及容器的诞生原因和历史: 容器技术是怎么一个概念呢?其实,IT里的容器技术是英文单词Linux Container的直译.contain ...

  7. Spring课程 Spring入门篇 1-2Spring简介

    课程链接: 1 Spring是什么? 2 为什么是Spring 3 Spring的作用: 4 适用范围 1 Spring是什么? a 开源框架 b 轻量级的控制反转(Ioc)和面向切面编程(AOP)的 ...

  8. flash系统奔溃的主要原因

    1.内存泄露(内存超过系统允许的最大限制,11.4版本为2G) 2.脚本死循环 3.舞台内元件的大小超出了系统限制

  9. <Android 基础（十一）> Snackbar

    介绍 Snackbars provide lightweight feedback about an operation. They show a brief message at the botto ...

  10. 无法找到msvcp90.dll的一个碰巧解决办法

     作者:朱金灿 来源:http://blog.csdn.net/clever101 上周同事使用VS2008编译一个C++的控制台工程.工程在release模式下可以编译成功,但是运行总是出现无法 ...