第一步：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. eclipse 分屏显示同一文件

    某个类很大,可能有数千行.当你想要将类开头部分与中间或者靠后的部分进行对比时,请follow如下步骤: Window -> Editor -> Toggle Split Editor (C ...

  2. eclipse把局部变量提为全局变量的快捷键是什么

    没有缺省定义的直接快捷键,或者就按Ctrl+1按照melord说的那样做,或者自己在Preference/General/Keys自己对Convert Local Variable to Feild进 ...

  3. Murano Weekly Meeting 2015.11.04

    Meeting time: 2015.November.4th 1:00~2:00 Chairperson:  Serg Melikyan, PTL from Mirantis Meeting sum ...

  4. jdk 动态代理 数据连接池

    package com.itheima.datasource; import java.io.PrintWriter; import java.lang.reflect.InvocationHandl ...

  5. @enable跟@import注解

    参考文章: 讲@import的相关内容:https://blog.csdn.net/u012437781/article/details/78626134 讲为什么registrar没有注入:http ...

  6. 百度网页分享js代码

    1.小图标 <div class="bdsharebuttonbox"> <a href="#" class="bds_qzone& ...

  7. MySQL 8.0之后版本密码修改

    MySQL刚刚安装完毕时 mysqld --initialize grep password /var/log/mysqld.log 获取临时密码 mysql -uroot -p 输入临时密码登录My ...

  8. Winform窗体“空闲事件”

    Application.Idle += Application_Idle; void Application_Idle(object sender, EventArgs e){ } 当应用程序完成处理 ...

  9. 查看SQL Server中的锁表及解锁

    有时候系统很慢,有可能是SQL Server数据库中某些表被锁定 --查看被锁表(需查多几次,有些临时锁很快会自动解锁): SELECT request_session_id AS spid, OBJ ...

  10. Java基础入门 - 关键字及其分类和说明

    类别 关键字 说明 访问控制 private 私有的 protected 受保护的 public 公共的 类.方法和变量修饰符 abstract 声明抽象 class 类 extends 扩充,继承 ...