Layui文件上传以及图片回显
var uploadInst = upload.render({
elem: '#pic',
//绑定的元素
url: 'jjsk/curriculum/uploadCurriculumPic?access_token=' + layui.data('layuiAdmin').access_token,
auto: true,
//是否自动上传
accept: "images",
//指定允许上传的文件类型
multiple: true,
//支持多文件上传
/* size: 1024 * 2, */
done: function(res, index, upload) { //假设code=0代表上传成功
if (isObjNotEmpty(res.data)) {
//上传成功后返回的文件路径
var fileurl = res.data[0].fileurl;
//原内容
var old_url = $("#pic_src").val();
//判断是否有原内容
if(old_url.length>0){
$("#pic_src").val( old_url + "," + fileurl);
}else{
$("#pic_src").val(fileurl);
}
$("#icon_data_div").empty();
//获取input中存入的地址
var type_pic_url = $("#pic_src").val();
var strs = new Array();
strs = type_pic_url.split(",");
//图片回显
var html = "";
for(var i=0;i<strs.length;i++){
html += "<div style='float:left;margin-right:10px;'><img alt='图片不存在' height='50' width='50' src='"+strs[i]+"'><span onclick=delFile(this,'"+strs[i]+"')>删除</span></div>";
}
$("#icon_data_div").html(html);
}
}
});
删除上传图片
function delFile(obj,file){
//obj为当前对象,file为该文件路径
$(obj).siblings().remove();
$(obj).remove();
//获取全部文件路径
var files = $("#pic_src").val();
//分割
var fileArray = files.split(",");
//得到要删除文件路径在全部文件路径中的定位
var index = fileArray.indexOf(file);
if (index > -1) {
//分割字符串
fileArray.splice(index, 1);
}
$("#pic_src").val(fileArray);
//后台请求数据
data={
xFileName:file,
access_token:layui.data('layuiAdmin').access_token
};
$.post('jjsk/curriculum/delCurriculumPic',data,function(json){
try {
n=eval('('+json+')');
} catch (e) {}
if(json.success){
parent.layer.msg("删除成功");
}else{
layer.msg(json.msg);
}
});
}
删除文件后台
@RequestMapping("delCurriculumPic")
@ResponseBody
public LayuiJson delCurriculumPic(HttpServletRequest request,String xFileName){
LayuiJson json = new LayuiJson();
//获得项目发布路径
String realPath = request.getServletContext().getRealPath("/");
String fileUrl = realPath + xFileName;
boolean b1 = FileUtils.lkh_delFile(fileUrl);
if (b1) {
json.setSuccess(true);
json.setMsg("删除成功!");
}else {
json.setSuccess(false);
json.setMsg("删除失败!");
}
return json;
}