第一步：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. flume failed to start agent because dependencies were not found in classpath

    FLUME_CLASSPATH=/root/flume/lib/ copied comon jar files from hadoop folder to the flume folder. cp / ...

  2. JavaWeb xss攻击

    出处: http://www.cnblogs.com/TankXiao/archive/2012/03/21/2337194.html XSS 全称(Cross Site Scripting) 跨站脚 ...

  3. python_元组 学习

    一.创建元组 代码: name=(‘chinese’,’gansu’,’beijing’) 创建空元组 name=() 元组中只包含一个元素时,需要在玄素后面加逗号(,)消除歧义: name=(‘ch ...

  4. Django-2 路由层

    U RL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 2.1 简单的路由配置 from django.urls import p ...

  5. spring mvc源码分析

    1.传统xml配置方式 web.xml里面配置:org.springframework.web.servlet.DispatcherServlet,处理项目的spring配置文件:classpath* ...

  6. Murano Weekly Meeting 2015.08.04

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

  7. Andrew Ng 的 Machine Learning 课程学习 (week3) Logistic Regression

    这学期一直在跟进 Coursera上的 Machina Learning 公开课, 老师Andrew Ng是coursera的创始人之一,Machine Learning方面的大牛.这门课程对想要了解 ...

  8. Mac 安装GTK

    Mac上配置GTK环境 安装command line工具, 如果安装了Xcode, 就直接跳过该步骤 安装Homebrew 使用brew install pkg-config 使用brew insta ...

  9. 拼json对象批量向后台添加数据

    网站中如果遇到批量提交格式相同数据,可以使用json来传输 $("#catalogSave").click(function(){ var array=[]; $("[n ...

  10. ZR国庆Round2解题报告

    心路历程 预计得分:100 + 10 - 20 + 10 = 120 实际得分:100 + 0 + 10 = 110 感觉这场打的挺稳的.开场秒掉A题,写+调差不多1h 然后刚T3暴力,刚完还有2h左 ...