【精品】使用jquery借助formdata上传文件

前端html页面

<input type="file" id="pic" name="pic">

<img src="loading.gif" id="img" style="display: none;" >
<button type="button">保存button><script>('button').click(function(){let files = $('#pic').prop('files'); //多个//或者let files = $('#pic')[0].files //单个if(files.length <= 0) {return alert('请选择要上传的文件')}let data = new FormData();data.append('pic', files[0]);// ajax被发起时，开始监听事件$(document).ajaxStart(function(){// loading展示$('#img').show()})// ajax结束后，开始监听事件$(document).ajaxStop(function(){// loading结束$('#img').hide()})$.ajax({url: getCtxPath()+'payMethod/b/uploadPic',type: 'POST',data: pic,cache: false,//不对FormData中的url进行编码，原样发送processData: false,//不修改contentType属性，使用默认contentType: false,success: function (res) {console.log(res)//将图片回显到页面中$("#pic").attr("src",res);}})});
script>

后端处理文件上传请求的处理器

@Resource
private MinioUtil minioUtil;@ResponseBody
@PostMapping("/b/uploadPic")
public String uploadPic(MultipartFile pic) {if (pic.isEmpty() || pic.getSize() == 0) {return "文件为空";}try {String newName = UUID.randomUUID().toString();String fileUrl = minioUtil.putObject(minioUtil.getBucketName(), pic, "sys/yin", newName);return fileUrl;} catch (Exception e) {e.printStackTrace();return "上传失败";}
}

上面控制器中文件上传上传是使用的是minio实现的，也可以使用其他技术实现，若使用文件上传可以参考一面博客：https://blog.csdn.net/lianghecai52171314/article/details/129920363

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！