文件异步上传(不需要提交表单)

引入js

ajaxfileupload.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
$("body").on("change", "input[type=file]", function () {
var fileElementId = $(this).attr("id");
var data = {"key": fileElementId};

$.ajaxFileUpload({
url: '/ad/creative/upload',
secureuri: false,
data: data, //除了文件之外的其他数据
fileElementId: fileElementId, //input元素的id
dataType: 'json',
success: function (result) {
if (result['status'] == 1) {
for (var key in result) {
if (key == 'status' || key == 'msg') {
continue;
}

$("#" + key).val(result[key]);
}

//预览、下载
$('#' + fileElementId).parent().nextAll().remove();
$('#' + fileElementId).parent().after('<a target="_blank" href="' + result[fileElementId + 'Path'] + '" title="预览" xmlns="http://www.w3.org/1999/html"><div class="iconAdvertiser auditMediaAd"></div></a><a id="download" href="javascript:void(0);" title="下载"><div class="iconAdvertiser downloadAd"></div></a>');
} else {
tooltip(data['msg']);
}
},
error: function () {
tooltip("生成模板失败!");
}
});
});

Controller相应方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@RequestMapping("upload")
@ResponseBody
public String upload(@RequestParam("file") MultipartFile file, @RequestParam("key") String key) {
Map<String, Object> map = new HashMap<>();

if (file == null || file.isEmpty()) {
map.put("status", 0);
map.put("msg", "请选择文件");
} else {
Map<String, String> fileMap = creativeService.uploadMaterial(file, key);

if (fileMap != null) {
map.put("status", 1);
map.put("msg", "上传成功");
map.putAll(fileMap);
} else {
map.put("status", 0);
map.put("msg", "上传失败");
}
}

return JSONObject.fromObject(map).toString();
}
-------------本文结束感谢您的阅读-------------

本文标题:文件异步上传(不需要提交表单)

文章作者:huihui

发布时间:2018年07月06日 - 19:07

最后更新:2019年02月14日 - 19:02

原始链接:http://101.200.47.120:8011/2018/07/06/文件异步上传(不需要提交表单)/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。