摘要：示例一页面上传附件文件对象代表附件通过对象传输到后台用于插入数据的不要去处理发送的数据不要去设置请求头是返回的之类的值，是定义的文件名查询上传失败后台接收多文件下面新增自定义方法多个附件上传换成也是唯一，好找图片示例二图片上传单张
[TOC]
示例一： 【1】页面js：/*
上传附件
docObj:文件对象
appid：cid
apptypeid：1、blog 2、
busitype：100——代表附件
*/
function uploadAttachment(docObj){
var appid = $("#appid").val();
var files =docObj.files;
var formData = new FormData();//通过对象传输到后台
formData.append("appid",appid);//用于sysfile插入数据的appid
for (var i = files.length - 1; i >= 0; i--) {
formData.append("files[]",files[i]);
}
$.ajax({
data : formData,
type : "POST",
url : "/common/xxx/upload",
cache : false,
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
dataType: "JSON",
success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名
//查询
$("#attachment").bootstrapTable("refresh");
attachment(appid);
},
error:function(){
toastr.error("上传失败");
}
});
}
【2】spring mvc后台接收多文件：
//下面新增自定义方法
@ResponseBody
@PostMapping("/upload")
R upload(@RequestParam("files[]") MultipartFile[] files,@RequestParam("appid") String appid) throws IOException, Exception {
//多个附件上传
for (int i = 0; i < files.length; i++) {
System.out.println(i);
String fname = files[i].getOriginalFilename();
// String fileName = FileUtil.renameToUUID(fname);//换成uuid——也是唯一，好找图片
String uuid = UUID.randomUUID().toString().replace("-", "");
String fileType = fname.substring(fname.lastIndexOf(".") + 1, fname.length()).toLowerCase();
String fileName = uuid+"."+fileType;//cf6ec8ccb62e451e8d5f27dab6bfeb3f.png
FileUtil.uploadFile(files[i].getBytes(),tuodataConfig.getUploadPublicPath()+"blog/", fileName);
FileDO fileDo= insertFile(appid,uuid,0,fname,fileName,fileType);
}
return R.ok();
}
示例二：
layui图片上传
【1】单张html:
js:
新增的js脚本：
编辑的js脚本：
后台代码：
/**
* 轮播图保存
*/
@Before(value = { JMSystemApiInterceptor.class })
public void rotationChartSave() {
String image = JMUploadKit.fileUpload(this, "file", "rotationChart");
Configure rotationChart = new Configure();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
rotationChart.setValue2(sdf.format(new Date()));
boolean result = false;
if (image != null) {
rotationChart.setName("rotationChart");
rotationChart.setValue(image);
result = configureDao.save(rotationChart);
}
if (result) {
// 给type跟desc赋值
Configure rotationChart1 = configureDao.get(false);
rotationChart.setType(rotationChart1.getType() + 1);// 获取最后一个type
rotationChart.setDesc("轮播图-" + (rotationChart1.getType() + 1));
rotationChart.update();
JMResult.success(this, "新增成功");
} else {
JMResult.fail(this, "新增失败");
}
}
/**
* 轮播图更新
*/
@Before(value = { JMSystemApiInterceptor.class })
public void rotationChartUpdate() {
String image = JMUploadKit.fileUpload(this, "file", "rotationChart");
Integer rotationChartId = getParaToInt("rotationChartId",null);
Configure rotationChart = new Configure();
Configure rotationChart1 = configureDao.getById(rotationChartId);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
boolean result = false;// 标识是否报错
if (image != null) {
if (rotationChart1.getValue() != null)
ToolUpload.deleteFile(rotationChart1.getValue());
rotationChart.setId(rotationChartId);
rotationChart.setValue(image);
rotationChart.setValue2(sdf.format(new Date()));// 记录更新时间
result = configureDao.update(rotationChart);
}
if (result) {
JMResult.success(this, "修改成功");
} else {
JMResult.fail(this, "修改失败");
}
}
【2】多张
参考文章路径：https://www.layui.com/demo/up...
示例三 【1】oss上传图片
