使用Spring boot + jQuery上传文件(kotlin)功能实例详解
文件上传也是常见的功能，趁着周末，用Spring boot来实现一遍。
前端部分
前端使用jQuery,这部分并不复杂，jQuery可以读取表单内的文件，这里可以通过formdata对象来组装键值对，formdata这种方式发送表单数据更为灵活。你可以使用它来组织任意的内容，比如使用
formData.append("test1","hello world");
在kotlin后端就可以使用@RequestParam("test1") greet: String来取得他的值。
在本例的上传中，formdata用于装配上传表单，就像这样：
function uploadfile() {
var formData = new FormData();
$.each($("input[type='file']")[0].files, function (i, file) {
formData.append('upload-file', file);
});
$.ajax({
url: "/upload",
method: "post",
data: formData,
processData: false,
contentType: false
}).done(function (res) {
if (res.success) {
$("#message").text(res.message + res.files);
$("#message").addClass("green")
$("#message").removeClass("red")
} else {
$("#message").text("cannot upload files, reason: " + res.message)
$("#message").addClass("red")
$("#message").removeClass("green")
}
})
.fail(function (res) {
})
}
使用FormData对象，在前端连form标签都不需要。
其中关于上面代码的几点解释：
•如果input标签上使用了multiple，那么用户可能选择多个文件，所以再装配formdata的时候，需要上面的each循环。
•contentType: false 设置成false告诉jQuery在header里不要用任何的content type。
•processData: false：告诉jQuery不用讲传输内容编码（因为默认的content type是application/x-www-form-urlencoded）。如我们要发送DOM或确实不需要编码的对象，就把这个参数设成false。
注意：
•如果不将contentType设置成false，kotlin后端会报异常
Current request is not a multipart request
•如果没有将processData设成false，javascript会报错：
Uncaught TypeError: Illegal invocation
•如果要上传多个文件，在input标签上设置multiple属性。
后端部分
后端准备在上传完成后，给前端回复一个成功或失败的信息，为此，创建一个返回的对象：
class UploadResult(val success: Boolean, val message: String, val files: Array<String>)
•success: 告诉前端是否上传成功
•message：服务器端往前端返回的信息，可以包含任意后端想返回的内容，比如今天服务器所在地天气不好，所以服务器打算拒绝非管理员的上传请求。
•files：上传成功了哪些文件。、
后端的关键代码：
@ResponseBody
@PostMapping("upload")
fun upload(@RequestPart("upload-file") uploadfile: Array<MultipartFile>): UploadResult {
if (uploadfile.count() == 0) return UploadResult(false, "the uploading file is not detected.", arrayOf())
val dir = env.getProperty("com._1b2m.defaultuploaddir")
val f: File = File(dir)
if (!f.exists()) {
f.mkdirs()
}
for (file in uploadfile) {
val fileName = file.originalFilename;
val filepath: String = Paths.get(dir, fileName).toString()
val stream: BufferedOutputStream = BufferedOutputStream(FileOutputStream(File(filepath)))
stream.write(file.bytes)
stream.close()
}
return UploadResult(true, "successfully uploaded your file(s). ", uploadfile.map { it.originalFilename }.toTypedArray())
}
注意：
在kotlin中的RequestPart("upload-file”)，和前端的formData.append('upload-file', file)要保持一致，我这里用的变量叫upload-file，如果不一致，后端就没有取到数据了。
本文涉及到的源代码：https://github.com/syler/Fun/tree/master/spring-boot-file-upload-with-jquery
最后上一张截图，图片上传成功：
以上所述是小编给大家介绍的使用Spring boot + jQuery上传文件(kotlin)，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关推荐
-
Kotlin 基础教程之数组容器
Kotlin 基础教程之数组容器 Arrays Kotlin 标准库提供了arrayOf()创建数组, **ArrayOf创建特定类型数组 val array = arrayOf(1, 2, 3) val countries = arrayOf("UK", "Germany", "Italy") val numbers = intArrayOf(10, 20, 30) val array1 = Array(10, { k -> k * k
-
Kotlin 单例实例详解
Kotlin 单例实例详解 单例的实现方法,可以通过同伴对象,或者 lazy. 示例: class Hello private constructor() { companion object { val instance = Hello() } } 通过 lazy 实现 class Hello private constructor() { private object Holder { val INSTANCE = Hello() } companion object { val insta
-
Kotlin开发的一些实用小技巧总结
前言 随着Google I/O大会的召开,Google宣布将支持Kotlin作为Android的开发语言,最近关于Kotlin的文章.介绍就异常的活跃. 本文主要给大家介绍了关于Kotlin开发的一些实用小技巧,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.Lazy Loading(懒加载) 延迟加载有几个好处.延迟加载能让程序启动时间更快,因为加载被推迟到访问变量时. 这在使用 Kotlin 的 Android 应用程序而不是服务器应用程序中特别有用.对于 Androi
-
Kotlin基本类型自动装箱出现问题解决办法
Kotlin基本类型自动装箱出现问题解决办法 问题 在Kotlin官方文档介绍基本类型时,给我们说明了在有些情况下会对基本类型自动进行装箱操作. 但是具体是如何进行装箱,以及何时进行装箱缺没有提供详细介绍.只是提供了一个例子,如下: val a: Int = 10000 print(a === a) // Prints 'true' val boxedA: Int? = a val anotherBoxedA: Int? = a print(boxedA === anotherBoxedA) /
-
spring boot + jpa + kotlin入门实例详解
spring boot +jpa的文章网络上已经有不少,这里主要补充一下用kotlin来做. kotlin里面的data class来创建entity可以帮助我们减少不少的代码,比如现在这个User的Entity,这是Java版本的: @Entity public class User { @Id @GeneratedValue(strategy = GenerationType.AUTO) private long id; private String firstName; private S
-
Android中使用Kotlin实现一个简单的登录界面
Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,被称之为 Android 世界的Swift,由 JetBrains 设计开发并开源. Kotlin 可以编译成Java字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行. 在Google I/O 2017中,Google 宣布 Kotlin 成为 Android 官方开发语言. 刚接触Kotlin的第一天,仿照QQ的登录界面,先写一个简单的登录界面,虽然笔者用的不是很熟,还在慢慢摸索,但是Kotlin是真
-
详解Kotlin中的变量和方法
详解Kotlin中的变量和方法 变量 Kotlin 有两个关键字定义变量:var 和 val, 变量的类型在后面. var 定义的是可变变量,变量可以被重复赋值.val 定义的是只读变量,相当于java的final变量. 变量的类型,如果可以根据赋值推测,可以省略. var name: String = "jason" name = "jame" val max = 10 常量 Java 定义常量用关键字 static final, Kotlin 没有static,
-
使用Spring boot + jQuery上传文件(kotlin)功能实例详解
文件上传也是常见的功能,趁着周末,用Spring boot来实现一遍. 前端部分 前端使用jQuery,这部分并不复杂,jQuery可以读取表单内的文件,这里可以通过formdata对象来组装键值对,formdata这种方式发送表单数据更为灵活.你可以使用它来组织任意的内容,比如使用 formData.append("test1","hello world"); 在kotlin后端就可以使用@RequestParam("test1") greet
-
Android实现上传文件到服务器实例详解
本实例实现每隔5秒上传一次,通过服务器端获取手机上传过来的文件信息并做相应处理:采用Android+Struts2技术. 一.Android端实现文件上传 1).新建一个Android项目命名为androidUpload,目录结构如下: 2).新建FormFile类,用来封装文件信息 package com.ljq.utils; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExce
-
vue中实现上传文件给后台实例详解
FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成 一个queryString 2. 异步上传二进制文件. (ps:说白了就是不使用form表单实现form表单提交数据或文件,如果还是不懂,请自行百度) 实现过程 1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式) 2.修改input框的默认样式 3.通过选择文件拿到数据 4.请求接口 以上就是本次关于vue中实现上传文件给后
-
node.js express框架实现文件上传与下载功能实例详解
本文实例讲述了node.js express框架实现文件上传与下载功能.分享给大家供大家参考,具体如下: 背景 昨天吉视传媒的客户对IPS信息发布系统又提了一个新需求,就是发布端发送消息时需要支持附件的上传,而接收端可以对发布端上传的附件进行下载:接收端回复消息时也需要支持上传附件,发布端可以对所有接收端上传的附件进行打包下载. 功能实现 前台部分 前台使用webUploader插件即可,这是百度开发的一款文件上传组件,具体使用查看它的API即可.这个项目之前开发的时候前台使用了angular.
-
Spring Boot应用上传文件时报错的原因及解决方案
问题描述 Spring Boot应用(使用默认的嵌入式Tomcat)在上传文件时,偶尔会出现上传失败的情况,后台报错日志信息如下:"The temporary upload location is not valid". 原因追踪 这个问题的根本原因是Tomcat的文件上传机制引起的! Tomcat在处理文件上传时,会将客户端上传的文件写入临时目录,这个临时目录默认在/tmp路径下,如:"/tmp/tomcat.6574404581312272268.18333/work/T
-
Spring boot实现上传文件到本地服务器
本文实例为大家分享了Spring boot实现上传文件到本地服务器的具体代码,供大家参考,具体内容如下 引入配置 UploadFileConfig类 @Configuration public class UploadFileConfig { @Value("${file.uploadFolder}") private String uploadFolder; @Bean MultipartConfigElement m
-
利用jQuery异步上传文件的插件用法详解
现在想实现用ajax来上传文件的功能,但是却发现Jquery自带的ajax方法只能上传文件名,而不能上传文件:用form提交虽然能够上传文件,但是却要刷新页面...多方查找下找到了一个可用的jQuery插件,刚好可以满足异步上传文件的要求. 代码 jquery.form.js 用法 这个插件是基于表单提交的,我们只要正常的写一段提交文件的表单,如: <form id="myForm" action="comment.php" method="post
-
SpringBoot文件上传与下载功能实现详解
目录 前言 1.引入Apache Commons FileUpload组件依赖 2.设置上传文件大小限制 3.创建选择文件视图页面 4.创建控制器 5.创建文件下载视图页面 前言 文件上传与下载是Web应用开发中常用的功能之一,在实际的Web应用开发中,为了成功上传文件,必须将表单的method设置为post,并将enctype设置为multipart/form-data 只有这样设置,浏览器才能将所选文件的二进制数据发送给服务器 从Servlet3.0开始,就提供了处理文件上传的方法,但这种文
-
JavaScript 上传文件限制参数案例详解
项目场景: 1,上传文件限制 功能作用: 1,防止前端操作上传异常文件 2,限制符合的规则,优化展示模型 功能实现: 1,获取file实例 2,执行校验规则方法 代码如下: //大小限制 checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size / 1024 / 1024 > rules ? reject() : resolve() }).then( () => { return tr
-
JavaScript获取上传文件相关信息示例详解
目录 前题场景 处理方式 图片文件 音频文件 判断处理 分析总结 前题场景 在开发过程中,文件上传是再熟悉不过的场景了,但是根据实际使用情况对上传文件的限制又各有不同.需要对本地上传文件进行相应的限制处理,防止不符合规则或者要求的文件上传到云存储中,从而造成云盘资源空间浪费. 与此同时,也在给客户端使用文件信息之前做了一次数据过滤处理,减少客户端对文件资源的处理和校验. 处理方式 因为客户端使用后台管理上传的图片文件和音频文件时,为了优化展示效果和加载的速度,所以在后台管理系统上传处希望依据图片