layui多文件上传讲解_layui+java多文件上传详解-Fun言

今天做了一个多文件上传的页面，运用的是layui前端框架，顺便把后台处理代码也贴出来，仅供参考

第一步：layui下载安装

第二步：前端样式

选择多文件

文件名大小状态操作

开始上传

取消

第三步：js处理$(function(){

var id=$("#shallowId").val();

var uploadFile={

init:function () {

this.upload();

},

//上传文件

upload:function(){

layui.use('upload', function(){

var $ = layui.jquery,

upload = layui.upload;

//多文件列表示例

var demoListView = $('#demoList'),

uploadListIns = upload.render({

elem: '#choiceList',

url: 'qp/shallow/comment/upload/'+id,

accept: 'file',

multiple: true,

auto: false,

bindAction: '#choiceListAction',

choose: function(obj){

var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

//读取本地文件

obj.preview(function(index, file, result){

if($('#demoList tr td').eq(0).text()=='xxx.txt'){

$('#demoList').empty();

}

var tr = $(['

',

'

'+ file.name +'',

'

'+ (file.size/1014).toFixed(1) +'kb',

'

等待上传',

'

',

'重传',

'删除',

'

',

'

'].join(''));

//单个重传

tr.find('.demo-reload').on('click', function(){

obj.upload(index, file);

});

//删除

tr.find('.demo-delete').on('click', function(){

delete files[index]; //删除对应的文件

tr.remove();

uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选

});

demoListView.append(tr);

});

},

done: function(res, index, upload){

if(res.code == 0){ //上传成功

var tr = demoListView.find('tr#upload-'+ index)

,tds = tr.children();

tds.eq(2).html('上传成功');

tds.eq(3).html(''); //清空操作

return delete this.files[index]; //删除文件队列已经上传成功的文件

}

this.error(index, upload,res.msg);

},

error: function(index, upload,msg){

var tr = demoListView.find('tr#upload-'+ index)

,tds = tr.children();

tds.eq(2).html(''+msg+'');

tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传

}

});

});

}

}

uploadFile.init();

})

这里主要配置url即可，调用后台接口进行上传。

第四步：java后台处理@RequestMapping(value = "/upload/{shallowId}", method = RequestMethod.POST)

@ResponseBody

public JSONObject upload(@RequestParam("file")MultipartFile file, @PathVariable Integer shallowId) throws Exception {

JSONObject json = new JSONObject();

String newFileName = null;

if (file != null && !file.isEmpty()) {

Map params= QiniuUtils.upImage(file);

Integer status= (Integer) params.get("status");

newFileName= "http://file.caapay.com/"+(String)params.get("newFileName");

params.put("shallowId",shallowId);

params.put("newFileName",newFileName);

if(status==200){

//执行数据库操作

Integer num=shallowCommentservice.uploadImg(params);

if (num>0){

json.put("code",0);

json.put("msg","");

json.put("data",newFileName);

return json;

}else{

json.put("code",1);

json.put("msg","");

json.put("data",newFileName);

return json;

}

}else{

//返回错误

json.put("code",1);

json.put("msg","");

json.put("data",newFileName);

return json;

}

}else{

//返回错误

json.put("code",1);

json.put("msg","");

json.put("data","");

return json;

}

}

注意事项：

1、这里需要注意的是，虽然是多文件上传，其实是一次一次请求的，他发送到后台的是数据流，所以我们用MultipartFile 接受即可

2、这里我是上传到七牛云，具体情况具体分析

3、返回值需返回特定json格式，否则报错json.put("code",1);//除了0以外的都是错误

json.put("msg","");//错误信息自定义即可

json.put("data","");//需要返回的值自定义

你还没有登录，请先使用 QQ登录 或 注册！

文章评论

发表评论