使用Ajax异步上传文件

使用Ajax上传文件的应用场景颇多,比如上传用户头像、博客文章中插入图片、对认证用户相关身份进行校验等等很多很多。

下面贴相关代码示例:
html代码片段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
                   <form class="layui-form" action="#" id="uploadForm">
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" id="config_name" placeholder="请输入配置名称" autocomplete="off"
class="layui-input">
</div>
</div>


<div class="layui-form-item layui-form-text">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<textarea id="config_desc" placeholder="请输入配置描述" class="layui-textarea"></textarea>
</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label">文件</label>
<div class="layui-input-block">
<input type="file" name="file">
<p class="help-block">请选择配置文件</p>
</div>
</div>




<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" id="save_config_file">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>

</form>

js代码片段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
//上传配置文件
$("#save_config_file").click(function () {

var name = $("#config_name").val();
var desc = $("#config_desc").val();
var userId = $("#userId").val();

var formData = new FormData($("#uploadForm")[0]);

formData.append("name",name);
formData.append("desc",desc);
formData.append("userId",userId);

$.ajax({
url: 'http://localhost:8090/bfi-web/api/ide/settings/uploadFiles',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {

layui.use('layer', function () {
var layer = layui.layer;

layer.msg(returndata.returnMsg, {
icon: 1
});
});

setTimeout(() => {

closeLayui();

}, 300);

},
error: function (returndata) {
console.log("====================Error==========================");
}
});





});

Java代码片段(这里是SpringMVC+腾讯云对象存储,可将其更换为其它对象存储,如七牛云、ftp或者是其它对象存储):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
   /**
* 上传文件
* @param request
* @param file
* @return
*/
@PostMapping(value="/uploadFiles",produces="application/json;charset=utf-8")
public JSONObject upModify(HttpServletRequest request, MultipartFile file) {

JSONObject json = new JSONObject();

try {

COSClientUtil cosClientUtil = new COSClientUtil();

if(!file.isEmpty()) {

String name = cosClientUtil.uploadFile2Cos(file);
String desc = request.getParameter("desc");
String names = request.getParameter("name");
String userId = request.getParameter("userId");

logger.info("desc:"+desc);
logger.info("names:"+names);
logger.info("userId:"+userId);

//图片名称
logger.info("name = " + name);

//上传到腾讯云
String imgUrl = cosClientUtil.getImgUrl(name);

logger.info("imgUrl = " + imgUrl);

//数据库保存图片地址
String dbImgUrl = imgUrl.substring(0,imgUrl.indexOf("?"));
logger.info("dbImgUrl = " + dbImgUrl);

IdeSettings ide = new IdeSettings();
ide.setName(names);
ide.setContent(dbImgUrl);
ide.setUserId(userId);
ide.setUpdateTime(DateUtil.date().toString());
ide.setUploadTime(DateUtil.date().toString());
ide.setDescription(desc);

boolean isAddConfig = ideSettingsService.insert(ide);

logger.info(isAddConfig);

if(isAddConfig) {
json.put(CommonEnum.RETURN_CODE, "000000");
json.put(CommonEnum.RETURN_MSG, "上传成功");
}else {
json.put(CommonEnum.RETURN_CODE, "222222");
json.put(CommonEnum.RETURN_MSG, "上传失败");
}



}else {
json.put(CommonEnum.RETURN_CODE, "111111");
json.put(CommonEnum.RETURN_MSG, "参数异常");
}

} catch (Exception e) {
e.printStackTrace();

json.put(CommonEnum.RETURN_CODE, "333333");
json.put(CommonEnum.RETURN_MSG, "特殊异常");

}

return json;
}

文章目录