## 前端表单 和 JQuery jsp/html代码

使用JQuery

<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>

导入maven依赖

<!--文件上传-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>

并且配置spring mvc提供的文件上传的类

<!--文件上传配置-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <!-- 请求的编码格式,必须和jSP的pageEncoding属性一致,以便正确读取表单的内容,默认为ISO-8859-1 -->
  <property name="defaultEncoding" value="utf-8"/>
  <!-- 上传文件大小上限,单位为字节(10485760=10M) -->
   <property name="maxUploadSize" value="10485760"/>
</bean>

Conroller.java

@PostMapping("/upload")
public void fileUpload2(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request) throws IOException {
  //上传路径保存设置
  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()));
}

Ajax实现文件上传(Spring MVC)的更多相关文章

  1. ajax实现文件上传,多文件上传,追加参数

    1.html部分实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  3. Ajax 与文件上传

    一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...

  4. 基于 Django的Ajax实现 文件上传

    ---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...

  5. ajax与文件上传

    一.ajax ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可 ...

  6. python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  7. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  9. Django学习笔记之Ajax与文件上传

      Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...

随机推荐

  1. 跨域解决方案 - JSONP

    目录 1. 定义 2. JSONP 解决跨域 3. 应用场景 4. 代码演示 1. 定义 在HTML 中, script 标签有两个个性质: script 标签可以不受同源策略的限制去访问服务器资源, ...

  2. 万字超强图文讲解AQS以及ReentrantLock应用(建议收藏)

    | 好看请赞,养成习惯 你有一个思想,我有一个思想,我们交换后,一个人就有两个思想 If you can NOT explain it simply, you do NOT understand it ...

  3. Java实现 蓝桥杯 算法训练 矩阵乘法

    算法训练 矩阵乘法 时间限制:1.0s 内存限制:512.0MB 提交此题 问题描述 输入两个矩阵,分别是ms,sn大小.输出两个矩阵相乘的结果. 输入格式 第一行,空格隔开的三个正整数m,s,n(均 ...

  4. 什么是 JVM ?

    什么是 JVM ? 解析:不仅仅是基本概念,还有 JVM 的作用. 答:JVM,即 Java Virtual Machine,Java 虚拟机.它通过模拟一个计算机来达到一个计算机所具有的的计算功能. ...

  5. java实现第七届蓝桥杯打靶

    打靶 题目描述 小明参加X星球的打靶比赛. 比赛使用电子感应计分系统.其中有一局,小明得了96分. 这局小明共打了6发子弹,没有脱靶. 但望远镜看过去,只有3个弹孔. 显然,有些子弹准确地穿过了前边的 ...

  6. 白嫖永久免费云服务器教程,永久免费虚拟主机、永久免费云数据库、搭建FTP服务器、服务器安装Linux / windows操作系统、服务器部署网站、宝塔一键部署多网站、独立ip、永久国内高速云服务器

    一.准备工作 1. 注册账号 声明:切记不可用服务器做违法的事情 申请地址:https://www.sanfengyun.com/ 图文教程地址:https://www.cnblogs.com/zwn ...

  7. 03 . Django之腾讯云短信

    简介 由于项目在注册.登录.找回密码 时需要发送短信验证的功能,我们使用腾讯云短信做. 为什么要用腾讯云短信呢? 因为注册就送 100条免费短信 的额度. 注册腾讯云 注册一个腾讯云账户,腾讯云中提供 ...

  8. 【Jmeter】日常骚操作最简洁上传和下载

    上传文件或图片 第一步:正常填写域名地址,请求头及路径(此处不过多讲解) 第二步:http请求中,高级设置——Implementation(翻译:实现)值选择修改为:java 第三步:查看结果树请求成 ...

  9. DRY原则的一个简单实践

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://dzone.com/articles/dry-dont-repeat-yourse ...

  10. IDEA环境Spring Boot 2.3整合Activiti 6.0,启动项目初始化表并创建核心服务

    如下步骤照着抄就完事了. 一.新建一个spring boot项目,并引入相关依赖 <?xml version="1.0" encoding="UTF-8" ...