第一步：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. docker 镜像保存为文件及从文件导入镜像的方法

    1.保存镜像为文件 docker save -o 要保存的文件名 要保存的镜像 举例: docker save -o 2.从文件载入镜像 docker load --input 文件或者docker ...

  2. python3 pip使用报错

     在windodws上pip3使用了很长时间,今天突然报错. Fatal error in launcher: Unable to create process using '"' 解决方案 ...

  3. 电量分析工具 Battery Historian 的配置及使用

    1.Building from source code(通过各种配置后从源码构建) 官方流程看似很麻烦,但一上手,很快就搞定,让我情何以堪. ps:以下均是参考官方及网友做的 copy https:/ ...

  4. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  5. 修改虚拟机IP地址

    Linux环境下IP地址配置文件路径: vim  /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE="eth0" BOOTPROTO ...

  6. .NET控制台程序监听程序退出

    There are mainly 2 types of Win32 applications, console application and window application. They hav ...

  7. java内存区域与内存溢出

    JVM的内存区域划分: jvm的内存区域分为5部分:程序计数器,虚拟机栈,本地方法栈,堆跟方法区. 程序计数器,虚拟机栈,本地方法栈三部分是线程私有的,堆跟方法区是公共的. 1.程序计数器 是一块较小 ...

  8. nodejs卸载安装

    作为新手nodejs卸载后安装就总出错,今天记录了详细的步骤: 参考一下网址:写的很详细https://jingyan.baidu.com/article/48b37f8dd141b41a646488 ...

  9. CentOS7安装MongoDB3.6企业版

    参考资源 https://docs.mongodb.com/manual/tutorial/install-mongodb-enterprise-on-red-hat/   下载安装 配置yum仓库 ...

  10. Form 头行附件查询

    查询Form的头行附件: SELECT  st.short_text order_short_text, description order_attach_desc, pk1_value order_ ...