RouYi bootstrap-fileinput 上传回显编辑添加删除
文章目录
- RouYi bootstrap-fileinput 上传回显编辑添加删除
- 前言
- 一、fileinput.js修改
- 二、设置页面fileinput.js调用
- 1.页面初始化控件
- 2.后台delete方法
- 3.页面点击删除事件不触发，任意上传一张图片，删除正常
- 总结
前言
因需求，需要获取图片的newfilename newfilepath并且要给用户展示上传时候的filename，实现如下。
一、fileinput.js修改
修改fileinput.js,因为previewId中包含文件名后缀中带有. （例如：test.jpg）,导致无法使用jq获取div信息。
提示：修改当前信息根据自己的调用，和对应的版本，参考：https://blog.csdn/torpidcat/article/details/103084364
if (!self._getThumbFile($thumb)) {
$thumb.attr({'id': self.previewInitId + '-i-' + i, 'data-fileindex': i});
i++;
} else {
$thumb.attr({'id': 'uploaded-' + $h.uniqId(), 'data-fileindex': '-1'});
}
self._getZoom(pid).attr({
'id': 'zoom-' + $thumb.attr('id'),
'data-fileindex': $thumb.attr('data-fileindex')
});
二、设置页面fileinput.js调用
1.页面初始化控件
参考：https://blog.csdn/torpidcat/article/details/103084364
function initIdCardFile(){
//测试图片回显
var initialList= [{"id":123,"filename":"001.jpg","filepath":"http://demo.ruoyi.vip/img/profile.jpg","newfilename":"fdsa"},
{"id":124,"filename":"002.jpg","filepath":"http://demo.ruoyi.vip/img/profile.jpg","newfilename":"te12"}];
var previewJson = new Array();//回显文件数组
var initPreviewConfig = new Array();
if(initialList!=null){
for(var i = 0; i < initialList.length; i++){
previewJson[i] = initialList[i].filepath;
//组装图片配置
var tjson = {
type:getFileTypeFromUrl(initialList[i].filepath),
caption: initialList[i].filename, // 展示的文件名
url: 'idcardremove', // 删除url 必填，可以写一个空方法，不然无法删除初始化图片
key: initialList[i].id, // 删除时Ajax向后台传递的参数
/* extra: function() {
return {"id":id};
} */ //这里也可以携带格外的参数
};
initPreviewConfig[i] = tjson;
}
}
// 多图上传
$("#multipleFile").fileinput({
uploadUrl: ctx + 'common/uploads',//上传路径
fileActionSettings:{
uploadClass:'hideBtn'
},
overwriteInitial: false,
initialPreviewAsData: true,
initialPreview:previewJson,
initialPreviewConfig: initPreviewConfig,
// uploadAsync:false, 需要使用异步
layoutTemplates :{
actionUpload:'',//去除上传预览缩略图中的上传图片
},
showPreview: true,//是否显示预览
showUpload: false,//不显示底部上传按钮
showRemove: false,//不显示底部清空按钮
showCaption: true,//显示底部上传按钮左侧文本(完全是为了美观)
}).on('filebatchuploadsuccess', function (event, data, previewId, index) {
var rsp = data.response;
}).on('fileuploaded',function(event,data,previewId,index){
var resultObj = data.response;
console.log(resultObj);
if(resultObj != null && resultObj.code == 0){
$("#" + previewId).append("<span class='hidden_img hidden_img_upload' hidden >"+resultObj.fileNames+"</span>");
$.modal.msgSuccess("上传成功");
}else{
$.modal.msgError("上传失败");
}
}).on('filebatchselected', function (event, files) {
$(this).fileinput("upload");//这里会根据uploadAsync值自动去执行对应的回调函
}).on('filebatchuploaderror', function (event, data, msg) {
//批量上传失败提示
var _maxRequestSize = 10240;
_allFileSize = 0;
if (_allFileSize > _maxRequestSize) {
msg = "上传文件总大小（" + (_allFileSize / 1024).toFixed(2) + "MB）超出限制（" + (_maxRequestSize / 1024).toFixed(2) + "MB）";
$('#input-id').fileinput('clear');
$.modal.msgWarning(msg);
}
}).on('fileclear', function (event, previewId, extra) {
//拒绝移除 如果给移除上传控件所有内容的功能，则系统会重新初始化回显的文件，那么我的 initInputFileImg()函数完全不起作用了，所以，禁用它
return false;
}).on('fileerror', function (event, data, msg) {
console.log("--------------------fileerror--------------------");
console.log(data);
console.log(msg);
$.modal.msgError("上传失败");
}).on('filepreremove', function(event, key) {
$.modal.msgSuccess("移除成功");
}).on('filebeforedelete', function(event, key) {
$.modal.msgSuccess("移除成功");
});
}
$(document).ready(function () {
initIdCardFile(); //调用上面的初始化方法
initInputFileImg();
});
function getFileTypeFromUrl(url){
if(url.endsWith('gif')||url.endsWith('jpg')||url.endsWith('jpeg')||url.endsWith('png')){
return 'image';
}
if(url.endsWith('mp4')){
return 'video';
}
}
$(this).find(‘.kv-file-content’) 请根据自己对应的获取避免添加多个，我这里只取第一个，如果不限制会同时添加两个。
可以按照自己的方式添加多个信息。利于后台提交，进行数据保存。
//回显文件 对应的div里追加 hidden_img
function initInputFileImg(){
$(".file-sortable").each(function(){
var tempFileName = $(this).find('.kv-file-content').find('.file-preview-image').attr("src");
$(this).find('.kv-file-content').eq(0).parent().append("<span class='hidden_img hidden_img_init' hidden >"+tempFileName+"</span>");
})
}
2.后台delete方法
写个空的就可以。我直接返回true。
代码如下（示例）：
/**
* 删除骑士主
*/
@RequiresPermissions("master:master:idcardremove")
@Log(title = "删除骑士身份证", businessType = BusinessType.DELETE)
@PostMapping( "/idcardremove")
@ResponseBody
public AjaxResult idcardremove(String ids)
{
return toAjax(true);
}
3.页面点击删除事件不触发，任意上传一张图片，删除正常
请参考：https://blog.csdn/A1318066232/article/details/79314890
如果无法找到回调函数，可以使用浏览器进行调试。
总结
注意对应版本，修改位置可以进行使用浏览器进行debug。确认js的方法，进行回调函数的使用。其他设置可以结合网上搜索相关配置。
更多推荐
RouYi bootstrap-fileinput 上传回显编辑添加删除
发布评论