前言

  • 做项目时，遇到表单中图像需要跟表单一起提交，这样会造成后台没办法接收到图片。后面上网调查后，明白表单提交时是默认application/x-www-form-urlencoded格式，只接受键值对。所以以下例子采用FormData格式异步提交表单，因为formData格式可以接收文件格式。

具体流程

  • 1.引入maven
<dependency>

            <groupId>commons-fileupload</groupId>

            <artifactId>commons-fileupload</artifactId>

            <version>1.3.1</version>

        </dependency>

        <dependency>

            <groupId>commons-io</groupId>

            <artifactId>commons-io</artifactId>

            <version>2.4</version>

        </dependency>
  • 2.在全局配置文件中引入相关配置
    <!--multipart处理类-->

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

        <property name="maxUploadSize" value="10485760"/>

        <property name="maxInMemorySize" value="4096"/>

    </bean>3, 153, 153);">1

  • 2
    • 

  • 3
    • 

  • 4
    • 

  • 5
    •
    • 3.定义jsp文件
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    
<body>
    
<h1>使用formData形式上传文件</h1>
    
    <form id="uploadForm" method="post" action="/upload.ajax" >
    
        <input type="file" id="avatar" name="avatar" onchange="previewImage('preview',this)" >
    
        <img id="preview">
    
        <button id="submit" type="button">提交</button>
    
    </form>
    
</body>
    
</html>
    
<script src="/media/js/jquery-1.10.1.min.js"></script>
    
<script type="text/javascript">

    //检验文件格式并预览
    
    function previewImage(preImageId, imageFile) {
    
        var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
    
        if (!pattern.test(imageFile.value)) {
    
            alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");
    
            imageFile.focus();
    
            $(imageFile).val("");
    
            return false;
    
        } else {
    
            var path;
    
            if (document.all)//IE
    
            {
    
                imageFile.select();
    
                path = document.selection.createRange().text;
    
            }
    
            else//FF
    
            {
    
                path = URL.createObjectURL(imageFile.files[0]);
    
            }
    
            $('#' + preImageId).attr('src', path);
    
        }
    
    }

    $('#submit').on('click',function () {
    
        var formData = new FormData($( "#uploadForm" )[0]);
    
        console.log(formData);
    
        $.ajax({
    
            type: 'POST',
    
            url: '/upload.ajax',
    
            data: formData,
    
            contentType: false,
    
            processData: false,
    
            success: function (result) {
    
                console.log(result);
    
            },
    
        });
    
    });
    
</script>
    • 4.后台采用MultiPartFile接收文件
    @RequestMapping("upload.ajax")
    
    @ResponseBody
    
    public String upload(MultipartFile avatar){
    
        //处理avatar逻辑
    
        return "success";
    
    }    

    • 1
      • 

    • 2
      • 

    • 3
      • 

    • 4
      • 

    • 5
      • 

    • 6

    后语

    • 该实现并不难，主要了解表单提交格式和相关实现即可。希望可以帮到相关人员。

    使用FormData格式上传图像并预览图片的更多相关文章

    1. [.ashx檔？泛型处理例程？]基础入门#2....FileUpload上传前，预览图片（两种作法--ashx与JavaScript）

      原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

    2. jsp+springmvc实现文件上传、图片上传和及时预览图片

      1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

    3. java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。

      java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

    4. Ajax上传图片以及上传之前先预览

      手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果 ...

    5. web 图片上传实现本地预览

      在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...

    6. 关于confluence上传文件附件预览查看时出现乱码的问题解决办法

      在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...

    7. confluence上传文件附件预览乱码问题（linux服务器安装字体操作）

      在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...

    8. 基于Jcrop的图片上传裁剪加预览

      最近自己没事的时候研究了下图片上传,发现之前写的是有bug的,这里自己重新写了一个! 1.页面结构 <!DOCTYPE html> <html lang="en" ...

    9. django 上传头像并预览 3选1

      注册页面的头像上传 register.html<!DOCTYPE html> <html lang="en"> <head> <meta ...

    随机推荐

    1. Leetcode24.Swap Nodes in Pairs两两交换链表中的节点

      给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 示例: 给定 1->2->3->4, 你应该返回 2->1->4->3. 说明: 你的算法只能使用常数的 ...

    2. FTP权限问题解析,553 Can't open that file: Permission denied

      FTP上传文件,提示553 Can't open that file: Permission denied 原因: 目录的所属组,所属用户属于root, 导致FTP无法上传, 修改组和所属用户为www ...

    3. mytop安装，使用mytop监控MySQL性能 (总结)

      mytop 是一个类似 Linux 下的 top 命令风格的 MySQL 监控工具,可以监控当前的连接用户和正在执行的命令. 1. 安装TermReadKey    下载地址:  wget  http ...

    4. Python学习笔记（四）Python程序的控制结构

      在学习了 Python 的基本数据类型后,我们就要开始接触Python程序的控制结构,了解 Python 是如何使用控制结构来更改程序的执行顺序以满足多样的功能需求.如果有的小伙伴在之前学过C语言,j ...

    5. PHP正则表达式判断身份

      //身份证验证 $id_card = ''; $preg_card="/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d ...

    6. Vue调试神器之Vue.js devTools

      Vue项目中使用Vue.js devTools这款调试神器,可以极大程度的提高我们的开发效率. 安装 1.打开Chrome网上应用商店安装插件(自墙),直接搜索devTools安装即可.贵宾传送阵,请 ...

    7. ubuntu上安装notepadpp

      Notepad++是一套非常有特色的自由软件的纯文字编辑器(许可证:GPL).有完整的中文化接口及支持多国语言编写的功能(UTF8 技术).它的功能比 Windows 中的 Notepad(记事本)强 ...

    8. Liferay Model Hints

      这篇文章主要介绍如何通过model hint 来修改liferay builder service生成数据库表中默认字段的长度. 1.什么是Model Hints? 它是对liferay builde ...

    9. 【python小随笔】单例模式设计（易懂版）

      1:单例模式原理 大道理:希望在系统中某个对象只能存在一个,单例模式是最好的解决方案,单例模式是一种常见的软件设置模式,在它的核心结构中只包含一个被称为单例类的特殊类,通过单例模式可以保证系统中的一个 ...

    10. Directx11教程(21) 修正程序最小化异常bug

      原文:Directx11教程(21) 修正程序最小化异常bug       很长时间竟然没有注意到,窗口最小化时候,程序会异常,今天调试水面程序时,随意间最小化了窗口,发现程序异常了.经过调试,原来程 ...