springmvc+ajax+formdata上传图片代码实例

2024-12-16 21:40:29

最近工作涉及到了上传图片的情况，在网上看了很多，就着重学习了下。上传文件的方式有多种，这里对使用FormData的方式进行说明。

1、springmvc项目想要上传文件，需要使用multipart方式，所以在spring-mvc.xml配置文件中需要增加multipart相关配置，代码如下

<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- one of the properties available; the maximum file size in bytes -->
    <property name="maxUploadSize" value="50000000"/>
  </bean>

2、jsp代码

<form action="picUpload" method="post" enctype="multipart/form-data" id="fileForm">
  <input type="file" id="pic" name="pic" multiple><br><br>　　
  <input type="text" id="id" name="id"><br><br>
  <input type="text" id="name" name="name"><br><br>
  <input type="button" value="上传" onclick="morePicUpload()"> </form>

需要注意的是，form 的 enctype 值必须为 multipart/form-data，这样才能在提交表单的时候传递文件数据。

如果要一次选择多个文件，可以在file表单添加"multiple",这样在选择文件时可以一次选择多个文件。

3、js代码

function morePicUpload(){
  var formData = new FormData(document.getElementById("fileForm"));
  alert(0);
  $.ajax({
    url : basePath+"morePicUpload",
    type : "post",
    data :formData,
    async : false,
    cache : false,　　　　　dataType : "json",
    contentType : false,
    processData : false,
    success : function(data){
      //code
    }
  });
}

先创建formData，用来存放表单中的内容，"fileForm"为jsp页面中form的id。

4、最后的是controller，代码如下

@RequestMapping("/morePicUpload")
  @ResponseBody
  public ResultTo morePicUpload(HttpServletRequest request){
    ResultTo resultTo = new ResultTo();
    resultTo.setData("");
    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

    String id = multipartRequest.getParameter("id");
    String name = multipartRequest.getParameter("name");
    System.out.println(id);
    System.out.println(name);
    List<MultipartFile> filelist = multipartRequest.getFiles("pic");
    for(MultipartFile file:filelist){
      if(!file.isEmpty()){
        System.out.println(file.getOriginalFilename());
      }
    }
    return resultTo;
  }

使用"MultipartHttpServletRequest"可以获取form表单中的所有空间内容，文件可以通过"List<MultipartFile> filelist = multipartRequest.getFiles("pic");"方式获取，然后进行文件的上传等操作就行了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

spring mvc利用ajax向controller传递对象的方法示例

前言最近因为工作的需要,在写一个基于springmvc+spring+mybatis的项目,其中涉及用ajax向controller发送数据的功能.因为不想使用spring的form标签,所以想看看有没有方法将ajax中的json数据直接转化为controller方法中的对象接收并处理.以下将逐渐介绍各种不同情况下传递json数据并封装的方法,下面话不多说,一起来看看详细的介绍: 基础类型如果传递的json数据为基础类型(Int,String等)的话,则只需要用@RequestParam标注
利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能

Ajax文件下载利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能: 步骤 1.导入组件并准备静态脚本 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.2</version> </dependency> &l
spring boot thymeleaf 图片上传web项目根目录操作步骤

thymeleaf介绍简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略未定义的标签属性,所以 t
spring boot2.0图片上传至本地或服务器并配置虚拟路径的方法

最近写了关于图片上传至本地文件夹或服务器,上传路径到数据库,并在上传时预览图片.使用到的工具如下: 框架:spring boot 2.0 前端模板:thymeleaf 图片预览:js 首先,上传以及预览,js以及<input type="file">,以及预览图片的JS function Img(obj){ var imgFile = obj.files[0]; console.log(imgFile); var img = new Image(); var fr = ne
基于SpringBoot实现图片上传与显示

本文为大家分享了SpringBoot实现图片上传与显示的具体代码,供大家参考,具体内容如下 SpringBoot实现图片上传与显示:Demo地址效果图预览思路一般情况下都是将用户上传的图片放到服务器的某个文件夹中,然后将图片在服务器中的路径存入数据库.本Demo也是这样做的. 由于用户自己保存的图片文件名可能跟其他用户同名造成冲突,因此本Demo选择了使用UUID来生成随机的文件名解决冲突. 但是本Demo不涉及任何有关数据库的操作,便于演示,就用原来的文件名. 步骤 pom相关依赖基于
SpringBoot限制文件或图片上传大小的两种配置方法

今天做图片上传时候,报了如下错:服务运行异常,Could not parse multipart servlet request; nested exception is java.lang.IllegalStateException: org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted
spring boot实现上传图片并在页面上显示及遇到的问题小结

最近在使用spring boot搭建网站的过程之中遇到了这样一个问题:用户注册时需要上传一个属于自己的头像,注册成功之后跳转到个人中心,在个人中心中显示用户信息.其中在显示头像的时候遇到了问题:上传头像的时候,我把头像存放到了项目文件下的static文件夹中,将其地址存放到了数据库对应的用户中,并且在idea中添加了热部署,但是在注册跳转到个人中心后还是无法显示头像,只有在下一次启动项目进入到个人中心时才可以. 被这个问题困扰了许久,最后是这样的解决的:在main目录下新建了一个webapp文件
SpringMVC多个文件上传及上传后立即显示图片功能

多文件上传就是改良一个方法把MultipartFile类换成CommonsMultipartFile类,因为上传多个文件用数组方式的话MultipartFile类不能初始化,它不支持数组 package com.meng.upload; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import javax.servlet.http.HttpServletRe
springmvc+ajax+formdata上传图片代码实例

最近工作涉及到了上传图片的情况,在网上看了很多,就着重学习了下.上传文件的方式有多种,这里对使用FormData的方式进行说明. 1.springmvc项目想要上传文件,需要使用multipart方式,所以在spring-mvc.xml配置文件中需要增加multipart相关配置,代码如下 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultip
SpringMVC上传图片代码实例

这篇文章主要介绍了SpringMVC上传图片代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.前端H5 <div class="container-fluid">  <div class="row"> <div class="col-md-1
SpringMVC的@InitBinder参数转换代码实例

这篇文章主要介绍了SpringMVC的@InitBinder参数转换代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 @Controller @RequestMapping("/index") public class IndexController { /** * 解决前端传递的日期参数验证异常 * * @param binder * @author hzj */ @InitBinder({"param",
springmvc视图解析流程代码实例

这篇文章主要介绍了springmvc视图解析流程代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下在springmvc.xml配置文件中配置了将逻辑视图转换成物理视图:  <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"&g
SpringMVC+Ajax+拼接html字符串实例代码

为什么写这个呢.因为在现在的网页中.单纯的同步传递数据已经变得非常少了.大多数都是通过Ajax异步来传递数据的.因此在这里用SpringMVC+Ajax做一个简单的小例子,同时辅助以拼接字符串显示.希望能为大家带来帮助. 本次案例的配置仍然是在上一篇SpringMVC的简单增删改查(SSM整合)的基础上再辅助配置Jackson的jar包. 服务器端 @RequestMapping("/ajaxlist") @ResponseBody//(springmvc的Jackson注解,返回js
AJAX简单测试代码实例

本文实例讲述了AJAX简单测试代码.分享给大家供大家参考.具体如下: 客户端:代码如下:(AJAX_test.html ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
基于ajax实现上传图片代码示例解析

js源码: /// <reference path="jquery-1.8.3.js" /> /// <reference path="ajaxForm/jquery.form.js" /> /*! * jQuery upload * 用于上传单个文件,上传成功后,返回文件路径. * 本插件依赖jQuery,jquery.form 请在使用时引入依赖的文件 * * Date: 2014/4/23 */ /* 使用: html: <div
rails上传图片代码实例

今天讲解一下rails的图片上传,就是最平常的上传图片这里的rails版本2.3.5 首先新建一个write_pic model内容如下: 复制代码代码如下: class WritePicrequire "RMagick"require "uuid"def self.write(pic_data,ori_name,resize = nil,file_type = "jpg",tag=false)#File.delete("c:/pr
Jquery ajax书写方法代码实例解析

Ajax在前端的应用极其广泛,因此,我们有必要对其进行总结,以方便后期的使用. AJAX优点: 可以异步请求服务器的数据,实现页面数据的实时动态加载, 在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. jquery在全局对象jquery(也就是$)绑定了ajax()函数,可以处理Ajax请求,ajax常用的配置选项有: async 是否异步执行,默认为True,千万不要指定为False method 发送的Method,缺省为"GET",可指定为'POST','P
JavaTCP上传图片代码实例

1.客户端代码 public class UploadPicClient { public static void main(String[] args) throws UnknownHostException, IOException { // TODO Auto-generated method stub //1,创建客户端socket Socket s = new Socket("localhost",10088); //2,读取客户端要上传的图片文件 FileInputStre

springmvc+ajax+formdata上传图片代码实例

相关推荐

随机推荐