bootstrap-fileinput(二：编辑(修改)界面文件的上传，回显，删除(数据库同时删除)的操作 )
Posted xiaoxust
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap-fileinput(二：编辑(修改)界面文件的上传，回显，删除(数据库同时删除)的操作 )相关的知识，希望对你有一定的参考价值。
文章目录
bootstrap-fileinput(二：编辑(修改)界面文件的上传，回显，删除(数据库同时删除)的操作 )
说在前面：
文件编辑的坑是真的多，在我反复摸索跟看别人的代码以后自己终于完成，这里给你们分享一下心得，编写不易，希望小伙伴们多多点赞！
一、编辑界面文件的上传
这个跟add界面的文件上传大同小异
1.首先引入js
<th:block th:include="include :: bootstrap-fileinput-css"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
2.引入标签
<div class="file-loading">
<input id="singleFile" name="file" type="file">
</div>
引入隐藏域
<input type="hidden" name="fjid" id="fjid">
3.引入js
<!--资料的实现-->
//单文件上传
$(document).ready(function()
$("#singleFile").fileinput(
uploadUrl: prefix + "/upload",//文件上传路
dropZoneTitle: '可以将文件拖放到这里,支持文件上传',
language: 'zh',
allowedFileExtensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx','html', 'htm', 'txt', 'text','rar', 'zip', 'gz', 'bz2', 'pdf', 'bpmn', 'bar','db'],
showUpload: true,//是否显示上传按钮
showRemove : true, //显示移除按钮
showPreview : true, //是否显示预览
showCaption: false,//是否显示标题
fileSizeGetter: true,
previewFileType: ['image','txt','text'],
validateInitialCount:true,
preferIconicPreview: true, // 这将强制缩略图按照以下文件扩展名的图标显示
maxFileCount: 1,
autoReplace: true//自动替换
//下面的自动上传提交，建议先熟悉下面的文件点击上传
).on('filebatchselected',function(event,data,previewId,index)
$(this).fileinput("upload");
document.getElementById('fjid').value = rsp.fjid;
log.info("return url:" + rsp.url)
log.info("return fileName:" + rsp.fileName)
log.info("return newFileName:" + rsp.newFileName)
log.info("return originalFilename: " + rsp.originalFilename)
//文件上传提交，后台返回数据前台接受
).on('fileuploaded',function(event,data,previewId,index)
//后台返回的数据，是一个json数据，里面是个map集合
var rsp = data.response;
//把后台返回的fjid的值赋给隐藏于的fjid属性
document.getElementById('fjid').value = rsp.fjid;
log.info("return url:" + rsp.url)
log.info("return fileName:" + rsp.fileName)
log.info("return newFileName:" + rsp.newFileName)
log.info("return originalFilename: " + rsp.originalFilename)
).on('fileremoved',function (event, id, index)
$("input[name='" + event.currentTarget.id +"']").val('')
)
);
后台代码：
/**
* 资料上传请求（单个）
* @return
*/
@PostMapping("/upload")
@ResponseBody
public AjaxResult uploadFile(MultipartFile file) throws Exception
try
// 上传文件路径
String filePath = RuoYiConfig.getUploadPath();
// 上传并返回新文件名称
String fileName = FileUploadUtils.upload(filePath, file);
//获取文件的上传路径
String url = serverConfig.getUrl() + fileName;
//得到文件的文件名
String[] split = fileName.split("/");
String fname = split[split.length - 1];
PmsFujian pmsFujian = new PmsFujian();
pmsFujian.setUrl(url);
pmsFujian.setName(fname);
pmsFujian.setCssize(file.getSize());
pmsFujian.setCsname(file.getOriginalFilename());
pmsFujian.setMkmc("工程资料");
pmsFujianService.insertPmsFujian(pmsFujian);
String fjid = pmsFujian.getFjid();
AjaxResult ajax = new AjaxResult();
ajax.put("url",url);
ajax.put("name", fname);
ajax.put("fjid",fjid);
ajax.put("fileName", fileName);
return ajax;
catch (Exception e)
return AjaxResult.error(e.getMessage());
然后调用工程的编辑方法
/**
* 修改保存工程
*/
@RequiresPermissions("common:gongcheng:edit")
@Log(title = "工程", businessType = BusinessType.UPDATE)
@PostMapping("/edit")
@ResponseBody
public AjaxResult editSave(PmsGongcheng pmsGongcheng,String fjid)
return toAjax(pmsGongchengService.updatePmsGongcheng(pmsGongcheng,fjid));
updatePmsGongcheng 里面的方法执行过程
/**
* 修改工程
*
* @param pmsGongcheng 工程
* @return 结果
*/
@Override
public int updatePmsGongcheng(PmsGongcheng pmsGongcheng,String fjid,String jcfa)
//先更新工程数据库中的信息
int i = pmsGongchengMapper.updatePmsGongcheng(pmsGongcheng);
//判断是否传入了新文件
if (!fjid.isEmpty())
String gcid = pmsGongcheng.getGcid();
PmsFujian pmsFujian = pmsFujianMapper.selectPmsFujianByFjid(fjid);
pmsFujian.setGlid(gcid);
pmsFujianMapper.updatePmsFujian(pmsFujian);
return i;
这样就完成了文件上传
二、编辑界面文件的回显
1.文件的实体类：
/** 附件主键 */
private String fjid;
/** 名称 */
@Excel(name = "名称")
private String name;
/** 路径 */
@Excel(name = "路径")
private String url;
/** 关联主键 */
@Excel(name = "关联主键")
private String glid;
/** 模块名称 */
@Excel(name = "模块名称")
private String mkmc;
/** 文件大小 */
@Excel(name = "文件大小")
private String size;
/** 文件大小（不加计算） */
@Excel(name = "文件大小", readConverterExp = "不=加计算")
private Long cssize;
/** 文件初始名称 */
@Excel(name = "文件初始名称")
private String csname;
2.想要回显文件，首先要在工程类(你的编辑界面的主类)里面关联文件类
public class PmsGongcheng extends BaseEntity
/**
* 附件类 xyh
* */
private List<PmsFujian> pmsFujian;
...生成你的get，set方法和你的tostring
xml中使用collection标签
<collection property="pmsFujian" column="fjid" ofType="com.lrkj.pms.ztjg.common.domain.PmsFujian" resultMap="PmsFujianResult"/>
在主类的xml文件引入文件的sql
<resultMap type="com.lrkj.pms.ztjg.common.domain.PmsFujian" id="PmsFujianResult">
<result property="fjid" column="fjid" />
<result property="name" column="name" />
<result property="url" column="url" />
<result property="glid" column="glid" />
<result property="mkmc" column="mkmc" />
<result property="size" column="size" />
<result property="cssize" column="cssize" />
<result property="csname" column="csname" />
<result property="createTime" column="create_time"/>
<result property="remark" column="remark" />
</resultMap>
3.进行文件的回显
1.首先文件的回显需要这几个东西：
initialPreview: initialPreview,
initialPreviewConfig: initialPreviewConfig,
initialPreviewAsData: true, // 默认为数据
上面的bootstrap-fileinput文件控件里面自带的属性，把这三个属性放到$(“#singleFile”).fileinput(）里面
2.编写js代码，实现initialPreview和initialPreviewConfig的实现逻辑：
var pmsFujian = [[$pmsGongcheng.pmsFujian]];
var initialPreview = [];
var initialPreviewConfig = [];
if(pmsFujian[0].fjid == null)
pmsFujian = [];
if(pmsFujian != null && pmsFujian != '')
for(var i = 0;i<pmsFujian.length;i++)
var Fujian = pmsFujian[i];
if(Fujian != null && Fujian !='')
var delFujian = new Object();
delFujian = generFilDel(Fujian);
//把文件的路径传到这个数组里面
initialPreview.push(Fujian.url);
//把文件的信息传到这个数组里面
initialPreviewConfig.push(delFujian);
//这个是判断文件属性的配置类，包含了文件的各种属性，其中url是文件的删除路径，必须要写入，与后台删除路径保持一致，key是文件删除时带到后台的ajax数据，在后台接收的是key不是fjid
function generFilDel(file)
if(file != null && file != '')
var type = file.url.substr(file.url.lastIndexOf('.') + 1);
if(type=='pdf')
return type: "pdf", size: file.cssize, caption: file.csname, url:prefix + "/deletePic", key: file.fjid, downloadUrl:file.url;
else if(type=='text')
return caption: file.csname, type: "text", size: file.cssize, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url;
else if(type=='mp4')
return type: "video", size: file.cssize, filetype: "video/mp4", caption: file.csname, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url;
else if(type=='txt')
return type: "txt", size: file.cssize, caption: file.csname, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url;
else if(type=='db')
return type: "db", size: file.cssize, caption: file.csname, url:prefix + "/deletePic", key: file.fjid , downloadUrl:file.url;
else
return caption: file.csname, size: file.cssize, url: prefix + "/deletePic", key: file.fjid;
此时，就完成了文件的回显：
回显的预览界面：
三.文件的删除
文件删除直接调用bootstrap里面的filesuccessremove方法
on('filesuccessremove',function(event,data,previewId,index)
for (var i = 0; i < pmsFujian.length; i++)
if (pmsFujian[i].fjid == data)
delete pmsFujian[i];
因为咱们在initialPreviewConfig传入了删除路径和删除时所带的文件id，所以先配置好js代码：
$("#singleFile").fileinput(
//添加文件的删除路径
deleteUrl: prefix + "/deletePic",
后台代码：
/**
*删除文件
*
*/
@PostMapping裁剪刚刚添加了一张图片
【中文标题】裁剪刚刚添加了一张图片【英文标题】：Crop just added a picture
【发布时间】：2015-04-17 15:33:00
【问题描述】：
我正在使用 Arnold Daniels 的文件输入预览 bootstrap-fileinput.js。并由 Kelly Hallman 裁剪 jquery.Jcrop.js。
bootstrap-fileinput 用于实时预览刚刚选择的图像，插入图像src 编码数据 URL。像这样data:image/png;base64,iVBORw.......
当用户选择照片并获得实时预览时，我想让他们裁剪该图像。我尝试使用一个附加按钮来做到这一点：当用户选择图像时，他们将获得实时预览，并且当他们单击按钮“裁剪”时，刚刚添加的图像将初始化 Jcrop 脚本。 ($img_wrapper.find('img').Jcrop();)。它工作正常，一切正常。
但是当我尝试做同样的事情时，没有按“裁剪”按钮，而是在选择文件后自动执行，它不起作用。据我了解，jQuery 看不到新图像。
我尝试了事件on.('click', func...，但它不起作用。然后我在文档 (http://jasny.github.io/bootstrap/javascript/#fileinput) 中发现 Jcrop 提供了她自己的听众 on.('change.bs.fileinput', funct... 但它仍然不起作用。所以按钮“裁剪”可以正常工作，自动不起作用，为什么？
所以，它是这样工作的：
（尝试选择图像，按“裁剪”，您可以裁剪图像）
http://jsfiddle.net/8f44yo9v/2/
但是那样做是行不通的：
http://jsfiddle.net/o7tbr6mo/
【问题讨论】：
对于动作$(#file-input).on('change', funct... 相同的结果，不要为刚刚添加的图像初始化裁剪。
【参考方案1】：
找到（不是最好的）解决方案来做到这一点。
在库 bootstrap-fileinput.js 的第 86 行，声明了变量 var $img = $('<img>')，这是图像 DOM，它将像缩略图一样添加以进行实时预览。所以最后，我们可以为该图像添加初始化。
if (window.location.pathname == '/add_tour')
$img.Jcrop(
aspectRatio: 16/9,
bgColor: '#3598DC',
setSelect: [$img.width(), 0, 0, 0],
minSize: [250, 0]
);
它会起作用的。但我认为，在引导库中更改代码并不是最好的主意。但是从该文件中获取 $img 对象，到其他 JS 代码，我不知道如何。
【讨论】：
【参考方案2】：
当 bootstrap-fileinput 触发“change.bs.fileinput”时，图像元素尚未创建。
你可以创建一个循环来等待元素：
$('input[type="file"]').on('change.bs.fileinput', function ()
var checkExist = setInterval(function ()
if ($('.fileinput-preview img').length)
$('.fileinput-preview img').Jcrop();
clearInterval(checkExist);
, 100);
);
PS：如果没有创建元素，您可以检查无限循环。
【讨论】：
我喜欢这种方法，但是一旦我上传了超过 85 像素高的图像，它会立即（嗯，在几分之一秒内）将其压缩到 85 像素的高度。为什么？以上是关于bootstrap-fileinput(二：编辑(修改)界面文件的上传，回显，删除(数据库同时删除)的操作 )的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 之 bootstrap-fileinput 选择完文件后自动上传修改预览区默认的初始文字描述编辑回显删除文件限制文件上传数量移除预览图的功能按钮
详解bootstrap-fileinput文件上传控件的亲身实践
SpringSpring MVC文件上传--整合bootstrap-fileinput和jQuery-File-Upload