Ajax实现文件上传功能(Spring MVC)

本文实例为大家分享了Ajax实现文件上传的具体代码，供大家参考，具体内容如下

前端表单 和 JQuery jsp/html代码

使用JQury

<script src="static/js/jquery-3.4.1.js"></script>

前端表单

<form id="form-avatar" enctype="multipart/form-data">
 <p>请选择要上传的文件：</p>

 <p><input type="file" name="file" /></p>
 <p><input id="btn-avatar" type="button" value="上传" /></p>
</form>

ajax请求服务器

<script>
 function uploadfile(){
  $.ajax({
   url : "/url/upload",
   data: new FormData($("#form-avatar")[0]),
   type : "POST",
   // 告诉jQuery不要去处理发送的数据，用于对data参数进行序列化处理 这里必须false
   processData : false,
   // 告诉jQuery不要去设置Content-Type请求头
   contentType : false,

   success : function(json) {
    alert("执行成功");
   },
   error : function(json) {
    alert("执行失败");

   }
  });
 }
 $("#btn-avatar").on("click",uploadfile);
</script>

Conroller.java

@PostMapping("/upload")
 public void fileUpload2(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request) throws IOException {
  System.out.println("走了");
  //上传路径保存设置
  String path = request.getServletContext().getRealPath("/upload");
  File realPath = new File(path);
  if (!realPath.exists()) {
   realPath.mkdir();
  }
  //上传文件地址
  System.out.println("上传文件保存地址：" + realPath);

  //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
  file.transferTo(new File(realPath + "/" + file.getOriginalFilename()));

 }

结果

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

赞 (0)

相关推荐

  • ssm框架Springmvc文件上传实现代码详解

    一.上传: 1)编写前台文件上传表单.Method必须为post,enctype为mutipart/form-data <body> <%--文件上传 1)method必须指定为post 2)enctype必须指定为multipart/form-data --%> <h1>头像上传</h1> <form action="${pageContext.request.contextPath}/admin/headpic" method=

  • SpringMVC使用第三方组件实现文件上传

    一.文件上传的必要前提 A form 表单的 enctype 取值必须是:multipart/form-data (默认值是:application/x-www-form-urlencoded) enctype:是表单请求正文的类型 B method 属性取值必须是 Post C 提供一个文件选择域 input type=file 二.借助第三方组件实现文件上传 三. /** * springmvc跨服务器上传文件 * @return */ @RequestMapping("/testFileU

  • SpringMVC 上传文件 MultipartFile 转为 File的方法

    在使用 SpringMVC 上传文件时,接收到的文件格式为 MultipartFile,但是在很多场景下使用都需要File格式的文件,记录下以便日后使用. 以下mFile为MultipartFile文件 此方法会在本地产生临时文件,使用完毕需要删除 在网上搜索未发现可直接使用的不产生临时文件的方法,查到几个本地测试皆无法通过,如哪位有不产生临时文件的方法,请多多指教

  • SpringMVC上传文件并保存到本地代码实例

    这篇文章主要介绍了SpringMVC上传文件并保存到本地代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 基本的MVC配置就不展示了,这里给出核心代码 在spring-mvc的配置文件中写入如下配置 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"

  • SpringMVC实现多文件上传

    SpringMVC实现多文件上传

    本文实例为大家分享了Spring MVC多文件上传的具体代码,供大家参考,具体内容如下 1)创建工程并导入JAR包 2)创建多文件选择页面 在 WebContent 目录下创建 JSP 页面 multiFiles.jsp,在该页面中使用表单上传多个文件,具体代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&g

  • Springmvc文件上传实现流程解析

    SpringMVC 中对文件上传做了封装,我们可以更加方便的实现文件上传.从 Spring3.1 开始,对于文件上传,提供了两个处理器: CommonsMultipartResolver StandardServletMultipartResolver 第一个处理器兼容性较好,可以兼容 Servlet3.0 之前的版本,但是它依赖了commons-fileupload 这个第三方工具,所以如果使用这个,一定要添加 commons-fileupload 依赖. 第二个处理器兼容性较差,它适用于 S

  • SpringMVC 单文件,多文件上传实现详解

    需要用到的流的相关知识:https://www.jb51.net/article/170640.htm SpringMVC中写好了文件上传的类. 要使用文件上传,首先需要文件上传相关的Jar包.commons-fileupload.jar 和 commons-io.jar. 添加到pom.xml或lib文件夹下. pom.xml: <dependency> <groupId>commons-fileupload</groupId> <artifactId>c

  • 利用SpringMVC和Ajax实现文件上传功能

    个人根据相关资料实现利用SpringMVC和Ajax实现文件上传功能: 环境: 1.JDK1.7 2.maven3.3.9 3.Tomcat7 第一步: 导入相关jar包: 第二步: 配置springmvc-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xml

  • SpringMVC文件上传原理及实现过程解析

    一.文件上传的必要前提 A form 表单的 enctype 取值必须是:multipart/form-data(默认值是:application/x-www-form-urlencoded) enctype:是表单请求正文的类型 B method 属性取值必须是 Post C 提供一个文件选择域 input type=file 二.借助第三方组件实现文件上传 三. /** * springmvc跨服务器上传文件 * @return */ @RequestMapping("/testFileUp

  • Ajax实现文件上传功能(Spring MVC)

    Ajax实现文件上传功能(Spring MVC)

    本文实例为大家分享了Ajax实现文件上传的具体代码,供大家参考,具体内容如下 前端表单 和 JQuery jsp/html代码 使用JQury <script src="static/js/jquery-3.4.1.js"></script> 前端表单 <form id="form-avatar" enctype="multipart/form-data"> <p>请选择要上传的文件:</p&

  • AJAX实现文件上传功能报错Current request is not a multipart request详解

    AJAX实现文件上传功能报错Current request is not a multipart request详解

    想做一个文件上传,spring boot配合Ajax来进行.却报错:Current request is not a multipart request 这是错误截图: 当时发生这种错误,我是很震惊的,我以为找了很多办法来解决. 有以下办法,当然这些并未解决我的问题,但是部分有用,就先列举出来: 1.在页面头部加入信息: <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8

  • jquery ajax实现文件上传功能实例代码

    下面看下ajax实现文件上传   没有使用插件 一.单文件上传 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></

  • 利用laravel+ajax实现文件上传功能方法示例

    前言 大家都知道,早期的XMLHttpRequest不支持文件上传,一般用第三方js插件或者flash,现在可以借助XMLHttpRequest Level 2 的FormData对象实现二进制文件上传,正好最近工作中遇到了这个需求,所以本文就来给大家总结下实现的方法,话不多说了,来一起看看详细的介绍吧. 示例代码 @extends('layouts.art') @section('content') <form class="form-horizontal" id="

  • jQuery+ajax实现文件上传功能

    jQuery+ajax实现文件上传功能

    jQuery+ajax实现文件上传功能(显示文件上传进度),供大家参考,具体内容如下 具体实现步骤 1.定义UI结构,引入bootstrap的CSS文件和jQuery文件 2.给上传按钮绑定点击事件 3.验证是否选择了文件 4.向FormData中追加文件 5.使用ajax发起上传文件的请求 6.设置文件的路径 7.使用xhr获得文件上传的进度 8.当文件上传完成让进度条显示绿色 <style> #loading { width: 20px; height: 20px; } #img { di

  • Ajax配合Spring实现文件上传功能代码

    由于项目需要,开发一个可以上传图片到服务器的web表单页面. 一. 需求 Web表单页面,可以通过表单上传图片以及其他文字信息. 二. 图片上传的流程 之前没有做过这类页面,通过查询资料.发现比较常见的做法,是先将图片上传到服务器端的某个文件目录下,服务器向前台返回图片的存储路径:之后,前台将图片存储路径以及其他表单信息一起提交到服务器,所有的表单信息存储在数据库中. 三. 方法 由于项目需要,我这里介绍两种图片上传方法,第一种是使用ajax对一个图片直接上传:第二种是先在前台将图片切割为较小的

  • Spring MVC环境中文件上传功能的实现方法详解

    Spring MVC环境中文件上传功能的实现方法详解

    前言 我们在实际开发过程中,尤其是web项目开发,文件上传和下载的需求的功能非常场景,比如说用户头像.商品图片.邮件附件等等.其实文件上传下载的本质都是通过流的形式进行读写操作,而在开发中不同的框架都会对文件上传和下载有或多或少的封装,这里就以Spring MVC环境中文件的上传为例,讲解Spirng MVC环境下的文件上传功能实现.下面话不多说了,来一起看看详细的介绍吧. 一.客户端编程 由于多数文件上传都是通过表单形式提交给后台服务器的,因此,要实现文件上传功能,就需要提供一个文件上传的表单

  • php+ajax实现图片文件上传功能实例

    目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子. 方法一,利用jquery ajaxfileupload.js实现文件上传 其实就是实现无刷新式的文件上传.可采用IFRAME文件上传原理.实际上在用PHP上传文件时...只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.g

  • Spring Boot项目中实现文件上传功能的示例

    Spring Boot项目中实现文件上传功能的示例

    在实际项目中,文件上传是很多项目必不可少的一个功能.那么在 Spring Boot 项目中又是如何来实现文件上传功能的呢?一般来说,上传的文件可以保存到项目根目录下的某一文件夹中,但这样做显然是不太合适的.因此我们选择将文件上传到专门的文件服务器中.很多云计算厂商都提供文件存储服务.这里我选择的是阿里云的对象存储(OSS). 一.配置OSS 1. 导入SDK 首先,你需要注册阿里云的账号并开通对象存储服务.在准备工作完成之后,需要导入 JAVA 版本的 SDK,这里使用 maven 进行导入 <

  • SpringMVC文件上传功能实例解析

    SpringMVC文件上传功能实例解析

    说明: 文件上传的途径 文件上传主要有两种方式: 1.使用Apache Commons FileUpload元件. 2.利用Servlet3.0及其更高版本的内置支持. 客户端编程 1.为了上传文件,必须将HTML表格的enctype属性值设为multipart/form-data,像下面这样: <form action="action" enctype="multipart/form-data" method="post"> Sel

随机推荐