使用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),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

时间: 2017-07-22

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

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 有两个关键字定义变量:var 和 val, 变量的类型在后面. var 定义的是可变变量,变量可以被重复赋值.val 定义的是只读变量,相当于java的final变量. 变量的类型,如果可以根据赋值推测,可以省略. var name: String = "jason" name = "jame" val max = 10 常量 Java 定义常量用关键字 static final, Kotlin 没有static,

Android中使用Kotlin实现一个简单的登录界面

Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,被称之为 Android 世界的Swift,由 JetBrains 设计开发并开源. Kotlin 可以编译成Java字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行. 在Google I/O 2017中,Google 宣布 Kotlin 成为 Android 官方开发语言. 刚接触Kotlin的第一天,仿照QQ的登录界面,先写一个简单的登录界面,虽然笔者用的不是很熟,还在慢慢摸索,但是Kotlin是真

Kotlin基本类型自动装箱出现问题解决办法

Kotlin基本类型自动装箱出现问题解决办法 问题 在Kotlin官方文档介绍基本类型时,给我们说明了在有些情况下会对基本类型自动进行装箱操作. 但是具体是如何进行装箱,以及何时进行装箱缺没有提供详细介绍.只是提供了一个例子,如下: val a: Int = 10000 print(a === a) // Prints 'true' val boxedA: Int? = a val anotherBoxedA: Int? = a print(boxedA === anotherBoxedA) /

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基础教程之数据类型 一切都是对象. 在Kotlin中一切都是对象.Kotlin有一些基本类型Boolean,Byte,Shot,Int,Long,Float,Double 在Kotlin中没有原始类型,以上这些类型都是对象,比如 运行结果如下 Kotlin支持16进制字面值,二进制字面值和科学记数法,官方文档中没有提到8进制 所有基本的几个数据类型不会进行显式类型转换,这一点尤为重要!那么如何进行转换呢?如下: 可以使用toLong,toInt,toShort,toChar等函数进行

Kotlin 基础教程之反射

Kotlin 基础教程之反射 概述 反射是语言与库中的一组功能, 可以在运行时刻获取程序本身的信息.在Kotlin中,不仅可以通过发射获取类的信息,同时可以获取函数和属性的信息.也就是说,在在运行时刻得到一个函数或属性的名称和数据类型) 可以通过简单的函数式, 或交互式的编程方式实现. 在Java平台上, 使用反射功能所需要的运行时组件是作为一个单独的JAR文件发布的( kotlinreflect.jar). 这是为了对那些不使用反射功能的应用程序, 减少其运行库的大小. 如果你需要使用反射,

Kotlin 基础教程之异常

Kotlin 基础教程之异常 概述 在Kotlin-null的处理里提到的NPE,它就是一个异常.而,异常是程序运行过程中出现的错误.在Kotlin中,所有的异常都继承于Throwable.对于每一个异常而言,它不仅仅包括异常的信息,还可以选择性包括异常的原因,而其原因也是一个异常的实例. 抛出异常 使用 throw表达式抛出异常: throw MyException("Hi There!") 捕获异常 如果在函数内部抛出了异常(或者在函数内部调用的其他函数抛出了异常),这个函数将在抛

Kotlin 基础教程之类、对象、接口

Kotlin 基础教程之类.对象.接口 Kotlin中类.接口相关概念与Java一样,包括类名.属性.方法.继承等,如下示例: interface A { fun bar() fun foo() { // 可选方法体 } } class Child: A { override fun bar() { // todo } override fun foo() { super.foo() } } class 构造器 Kotlin 中的类可以有一个 主构造器, 以及一个或多个次构造器, 主构造器是类头

Kotlin基础教程之操作符与操作符重载

Kotlin基础教程之操作符与操作符重载 Kotlin操作符的使用方法与其他语言差不多,最大的特点就在于infix function call(事实上infix function call并不是操作符的特性,而是函数的特性)和操作符重载. 可以看到在Kotlin中大部分的操作符都与一个函数相对应,之所以这样做,大概是为了进行操作符重载. Kotlin官方文档中强调"=赋值"操作在Kotlin中不是操作符,换句话说类似于x = y = z这样的连续赋值并不被允许(甚至赋值操作也不能和常规

Kotlin基础教程之函数定义与变量声明

Kotlin基础教程之函数定义与变量声明 可以看到,函数定义就是 <访问控制符> <函数名> <参数列表> <:返回类型(不写就是无返回类型)> { 函数体 } 单语句函数可以简写,比如add函数和add1函数效果是一样的 变量定义 var <标识符> : <类型> = <初始化值> 常量定义 val <标识符> : <类型> = <初始化值> 常量与变量都可以没有初始化值,但是在引用前

kotlin基础教程之类和继承

kotlin基础教程之类和继承 类声明 使用class关键字声明类,查看其声明格式: : modifiers ("class" | "interface") SimpleName typeParameters? primaryConstructor? (":" annotations delegationSpecifier{","})? typeConstraints (classBody? | enumClassBody)

Kotlin 基础教程之泛型

Kotlin 支持泛型, 语法和 Java 类似. 例如,泛型类: class Hello<T>(val value: T) val box = Box<Int>(1) val box1 = Box(2) 泛型函数: fun <T> foo(item: T): List<T> { // do something } val list = foo<Int>(1) fun <T> T.toString2(): String { // 扩展

Kotlin 基础教程之注解与java中的注解比较

Kotlin 的注解完全兼容 Java 的注解. 声明注解 @Target(AnnotationTarget.CLASS, AnnotationTarget.FUNCTION, AnnotationTarget.VALUE_PARAMETER, AnnotationTarget.EXPRESSION) @Retention(AnnotationRetention.SOURCE) @MustBeDocumented annotation class Fancy 可以通过向注解类添加元注解(meta