第一步：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. vue-cli构建项目添加网站ico的logo

    1.网上找一个把图片改成ico格式的网站,把logo改成ico格式,命名favicon.ico 2.将favicon.ico放入static目录 3.在index.html文件中引入 <link ...

  2. spring和springmvc父子容器关系

    一般来说,我们在整合spring和SpringMVC这两个框架中,web.xml会这样写到: <!-- 加载spring容器 --> <!-- 初始化加载application.xm ...

  3. VBS 学习

    VBS其他功能 获取系统用户名 DimWshNetwork Set WshNetwork =CreateObject("WScript.Network") strTaccount ...

  4. readline的用法

    with open(r'C:\Users\admin\pycdtest\wanyue\llduizhang_20180207\33_1517970821000304388_119061116',enc ...

  5. Java基础15-数组实例学生管理系统

    import java.util.Scanner; public class Student{ public static void main(String[] args){ Scanner in=n ...

  6. python3+Appium自动化12-H5元素定位环境搭建

    前言 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原生控件进行元素 ...

  7. 在基于WCF开发的Web Service导出WSDL定义问题及自定义wsdl:port 名称

             在契约优先的Web服务开发过程中,往往是先拿到WSDL服务定义,各家开发各自的服务实现或客户端,然后互相调用.          尽管Web Service的标准已经发布很多年,但各 ...

  8. JS匿名函数递归实现阶乘

    var rs = (function (value) { if (value > 1) return value * arguments.callee(value - 1); return va ...

  9. 简单二级导航JQ事件代码

    $(function()){ $("li").hover(function(){ $(this).children("dl").show() },functio ...

  10. 从零开始的全栈工程师——js篇2.20（事件对象 冒泡与捕获）

    一.复习 面向对象 1)单例模式 2)工厂模式 3)构造函数 ①类js天生自带的类 基类object function array number math boolean date regexp st ...