js+jquery上传文件/图片

6 篇文章 0 订阅

采用表单

1、上传单张图片

accept="image/*" 接受任何类型的图片

前端:
在这里插入图片描述
后台:
在这里插入图片描述

2、上传多张图片

前端:

<form action='/xxxx" method="xxx">
	<input type="file" id="file1">
	<input type="file" id="file2">
	<input type="file" id="file3">
	....
	<input tyle="submit">
</form>

后台:
采用@RequestParam(“file1”) 、@RequestParam(“file2”)、@RequestParam(“file3”)、、、对应

采用ajax

出现如下bug:

  • Unable to process parts as no multi-part configuration has been provided
  • Required request part ‘file’ is not present。。。。。
  • the request was rejected because no multipart boundary was found

可能有如下原因:

1、项目配置:【我这里是springboot项目配置】

  • spring-servlet-multipart-enabled=true;【true默认开启】
  • spring-http-multipart-enabled=true;【true默认开启】

2、可能是@RequestParam()注解名称和前端没对应上,
3、可能是前端获取文件没有传过去

解决方法:

  • 可利用表单的FormData传递参数
    • new FormData($("#表单id")).append(key,value); key对应上面的file1,file2…
    • $(’#file’)[0].files[i-1]【value】获取对应文件/图片/…,
    • 注意不要设置content-Type(会自动加上,否则就是画蛇添足),
    • 并且取消序列化processData)

测试:

查看上传时的contentType是否为multipart/form-data; boundary=…:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值