jquery+springboot实现文件上传功能
本文实例为大家分享了jquery+springboot实现文件上传功能的具体代码，供大家参考，具体内容如下
前端
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="max-age=21600" />
<meta http-equiv="Expires" content="Mon, 18 Aug 2014 23:00:00 GMT" />
<meta name="keywords" content="">
<meta name="description" content="table/update.html">
</head>
<body>
<span>-----------form submit--------------</span>
<br>
<span>-----------单文件--------------</span>
<form action="/metadata/metaTables/single-file" method="post" enctype="multipart/form-data">
<input type="file" name="meFile" />
<p>
<input type="submit" value="提交" />
<input type="reset" value="清空" />
<p>
</form>
<span>-----------单文件+参数->RequestParam接收参数</span>--------------</span>
<form action="/metadata/metaTables/single-file-param" method="post" enctype="multipart/form-data">
<input type="file" name="meFile" />
name：<input name="name"></input>
<p>
<input type="submit" value="提交" />
<input type="reset" value="清空" />
<p>
</form>
<span>-----------单文件+参数->对象接收参数</span>--------------</span>
<form action="/metadata/metaTables/single-file-object" method="post" enctype="multipart/form-data">
<input type="file" name="meFile" />
aaa:<input name="aaa"></input>
bbb:<input name="bbb"></input>
ccc:<input name="ccc"></input>
<p>
<input type="submit" value="提交" />
<input type="reset" value="清空" />
<p>
</form>
<span>-----------多文件（参数传递和单文件一致）--------------</span>
<form action="/metadata/metaTables/many-file" method="post" enctype="multipart/form-data">
<input type="file" name="meFile" multiple="multiple" />
<p>
<input type="submit" value="提交" />
<input type="reset" value="清空" />
<p>
</form>
<span>------------文件夹(文件夹下的所有文件)-------------</span>
<form action="/metadata/metaTables/dir" method="post" enctype="multipart/form-data">
<input type="file" name="meFile" webkitdirectory directory />
<p>
<input type="submit" value="提交" />
<input type="reset" value="清空" />
<p>
</form>
<span>------------Ajax通过FormData上传文件-------------</span>
<br>
<span>------------1.使用form表单初始化FormData对象方式上传文件-------------</span>
<br>
<form id="ajax_formdata">
aaa:<input name="aaa" value="1"></input>
bbb:<input name="bbb" value="2"></input>
ccc:<input name="ccc" value="3"></input>
input<input id="ajax_formdata_file" type="file" name="meFile"/>
<p>
<button onclick="save()">单input提交</button>
<button onclick="remove1()">清空1</button>
<button onclick="remove2()">清空2</button>
<p>
</form>
<span>------------2.使用FormData对象添加字段方式上传文件-------------</span>
<form id="ajax_formdata1">
aaa:<input name="aaa" value="4"></input>
bbb:<input name="bbb" value="5"></input>
ccc:<input name="ccc" value="6"></input>
input<input id="ajax_formdata_file1" type="file" name="meFile"/>
多文件提交<input id="ajax_formdata_file2" type="file" name="meFile" multiple="multiple"/>
input<input id="ajax_formdata_file3" type="file" name="meFile"/>
<p>
<button onclick="save1()">单input提交</button>
<button onclick="save2()">多文件提交</button>
<button onclick="save3()">多input提交</button>
<button onclick="remove1()">清空1</button>
<button onclick="remove2()">清空2</button>
</p>
</form>
<strong>后端MultipartFile怎么接受，看前端formData.append 怎么构建</strong>
<br>
<strong>formData.append("meFile", File对象)-->MultipartFile</strong>
<br>
<strong>formData.append("meFile", 多File对象)-->MultipartFile[]</strong>
<script src="../../assets/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="../../assets/jquery.form.js"></script>
<script>
function save(){
var formData = new FormData($('#ajax_formdata')[0]);
$.ajax({
url: '/metadata/metaTables/ajax-formdata',
type: "post",
data: formData,
contentType: false,
processData: false,
success: function (data) {
alert("success")
}
});
}
function save1(){
var formData = new FormData();
var formJson = $('#ajax_formdata1').serializeJson();
formData.append("num", 110)
formData.append("test", JSON.stringify(formJson))
formData.append("meFile", $('#ajax_formdata_file1')[0].files[0]);
$.ajax({
url: '/metadata/metaTables/ajax-formdata1',
type: "post",
data: formData,
contentType: false,
processData: false,
success: function (data) {
alert("success")
}
});
}
function save2(){
var formData = new FormData();
formData.append("test", JSON.stringify({'aaa':111,'bbb':222,'ccc':333}))
for(var f of $('#ajax_formdata_file2')[0].files)
formData.append("meFile", f);
$.ajax({
url: '/metadata/metaTables/ajax-formdata2',
type: "post",
data: formData,
contentType: false,
processData: false,
success: function (data) {
alert("success")
}
});
}
function save3(){
debugger
var formData = new FormData();
formData.append('num',123456)
for(let i=0;i<$('#ajax_formdata1 input[type="file"]').length;i++){
for(let j=0;j<$('#ajax_formdata1 input[type="file"]')[i].files.length;j++){
formData.append("meFile", $('#ajax_formdata1 input[type="file"]')[i].files[j]);
}
}
$.ajax({
url: '/metadata/metaTables/ajax-formdata3',
type: "post",
data: formData,
contentType: false,
processData: false,
success: function (data) {
alert("success")
}
});
}
function remove1(){
alert("通过替换input实现")
//第二种：
var obj = document.getElementById('ajax_formdata_file') ;
obj.outerHTML=obj.outerHTML;
}
function remove2(){
alert("clear方法")
//第一种:
var obj = document.getElementById('ajax_formdata_file') ;
obj.select();
document.selection.clear();
}
(function ($) {
$.fn.serializeJson = function () {
var serializeObj = {};
var array = this.serializeArray();
var str = this.serialize();
$(array).each(function () {
if (serializeObj[this.name]) {
if ($.isArray(serializeObj[this.name])) {
serializeObj[this.name].push(this.value);
} else {
serializeObj[this.name] = [serializeObj[this.name], this.value];
}
} else {
serializeObj[this.name] = this.value;
}
});
return serializeObj;
};
})(jQuery);
</script>
</body>
</html>
后端
@RestController
@RequestMapping({ "/metadata/metaTables" })
public class MetaTablesController
{
@PostMapping("single-file")
public void singleFile(@RequestParam("meFile")MultipartFile multipartFile){
System.out.println();
}
@PostMapping("single-file-param")
public void singleFile(@RequestParam("meFile")MultipartFile multipartFile,@RequestParam("name")String name){
System.out.println();
}
@PostMapping("single-file-object")
public void singleFile(@RequestParam("meFile") MultipartFile multipartFile, Test test){
System.out.println();
}
@PostMapping("many-file")
public void manyFile(@RequestParam("meFile")MultipartFile[] multipartFile){
System.out.println();
}
@PostMapping("dir")
public void dir(@RequestParam("meFile")MultipartFile[] multipartFile){
System.out.println();
}
@PostMapping("ajax-formdata")
public void ajaxFormData(@RequestParam("meFile")MultipartFile multipartFile, Test test){
System.out.println();
}
//对象接收用@RequestPart 传递json字符串，其他用 @RequestParam
@PostMapping("ajax-formdata1")
public void ajaxFormData1(@RequestParam("meFile")MultipartFile multipartFile, @RequestPart("test") Test test, @RequestParam("num")int num){
System.out.println();
}
@PostMapping("ajax-formdata2")
public void ajaxFormData2(@RequestParam("meFile")MultipartFile[] multipartFile,@RequestPart("test") Test test){
System.out.println();
}
@PostMapping("ajax-formdata3")
public void ajaxFormData3(@RequestParam("meFile")MultipartFile[] multipartFile, @RequestParam("num")int num){
System.out.println();
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
SpringBoot实现单文件与多文件上传功能
目录 1.单文件上传 2.多文件上传 1.单文件上传 首先创建一个Spring Boot项目,并添加spring-boot-starter-web依赖 然后创建一个upload.jsp文件,做一个简单的文件上传页面,具体代码如下: <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Titl
-
springboot+thymeleaf 文件上传功能的实现代码
pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifa
-
SpringBoot 文件或图片上传与下载功能的实现
导入依赖(pom.xml) <!-- 上传下载需要设计到的jar包 --> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.6</version> </dependency> <dependency> <groupId>commons-fileu
-
SpringBoot实现文件上传功能
经典的文件上传 服务器处理上传文件一般都是先在请求中读取文件信息,然后改变名称保存在服务器的临时路径下,最后保存到服务器磁盘中.本次以thymeleaf搭建demo,因此需要引入thymeleaf依赖库. <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> <versio
-
jquery+springboot实现文件上传功能
本文实例为大家分享了jquery+springboot实现文件上传功能的具体代码,供大家参考,具体内容如下 前端 <!DOCTYPE html> <html lang="zh"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-w
-
原生JS和jQuery版实现文件上传功能
本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子,供大家参考,具体内容如下 <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>HTML5 Ajax Uploader</title> <script src="jquery-2.1.1.min.js"></
-
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
-
SpringBoot+layui实现文件上传功能
什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.用我的话来理解,就是spring boot其实不是什么新的框架,它默认配置了很多框架的使用方式,就像maven整合了所有的jar包,spring boot整合了所有的框架(不知道这样比喻是否合适). 页面代码(只需要引入基础layui的css与js) <fieldset c
-
使用jQuery.form.js/springmvc框架实现文件上传功能
使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享. 重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="mul
-
SpringBoot实现文件上传下载功能小结
最近做的一个项目涉及到文件上传与下载.前端上传采用百度webUploader插件.有关该插件的使用方法还在研究中,日后整理再记录.本文主要介绍SpringBoot后台对文件上传与下载的处理. 单文件上传 // 单文件上传 @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestParam("file") MultipartFile file) { try { if (
-
jquery 实现拖动文件上传加载进度条功能
通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" > <div class="progress-label">0%</div> <div class="son"></div> </div> //要拖动到的地方 <div class="main
-
SpringBoot实现文件上传与下载功能的示例代码
目录 Spring Boot文件上传与下载 举例说明 1.引入Apache Commons FileUpload组件依赖 2.设置上传文件大小限制 3.创建选择文件视图页面 4.创建控制器 5.创建文件下载视图页面 6.运行 Spring Boot文件上传与下载 在实际的Web应用开发中,为了成功上传文件,必须将表单的method设置为post,并将enctype设置为multipart/form-data.只有这种设置,浏览器才能将所选文件的二进制数据发送给服务器. 从Servlet 3.0开
-
Spring框架实现文件上传功能
在Java中实现文件的上传有多种方式,如smartUpload或是使用Strus2,本文与大家分享使用Spring框架中的MultipartFile类来实例文件的上传. 不啰嗦了,直接上干货.先是编写了一个实现文件上传的类FileUploadingUtil,此类中定义了两个对外公开的方法,upload和getFileMap. 前者需要传入一个Map参数,是用户提交的表单中的文件列表,最终返回值的也是一个Map类型对象,其键名为上传的文件名称,键值为文件在服务器上的存储路径:后者主要是用于测试用途