ファイルアップロードのブートストラップファイル入力の使用法の詳細
Ruoyi フレームワークを使用して学習しているため、bootstrap-fileinput の機能が組み込まれており、多くの落とし穴を踏んでいるとも言えますが、学習とデバッグの経験を共有します。
1. ブートストラップ ファイル入力プラグインは中国語の命令を使用します
(1) 属性の紹介
属性 | タイプ | デフォルト | 説明する |
---|---|---|---|
言語 | 弦 | 'で' | 多言語設定。使用する場合は、事前に locales フォルダーの下に対応する言語ファイルをインポートする必要があります。中国語 zh、インポートされた言語ファイルは fileinput.js の後に配置する必要があります。 |
ショーキャプション | ブール値 | 真実 | 選択したファイルのプロファイルを表示するかどうか |
表示閲覧 | ブール値 | 真実 | 参照ボタンを表示するかどうか |
ショープレビュー | ブール値 | 真実 | プレビューエリアを表示するかどうか |
表示削除 | ブール値 | 真実 | 削除ボタンを表示するかどうか |
ショーアップロード | ブール値 | 真実 | アップロードボタンを表示するかどうか |
表示キャンセル | ブール値 | 真実 | キャンセルボタンを表示するかどうか |
表示閉じる | ブール値 | 真実 | 閉じるボタンを表示するかどうか |
showUploadedThumbs | ブール値 | 真実 | この属性は、複数のファイルを選択して右下のアップロードボタンをクリックして一括でアップロードし、全て完了した後に一括でファイルを選択するといった使用方法に基づいています。以前に正常にアップロードされたもの。それを制御するのはこのプロパティです。ここで true が設定されている場合でも、ファイルのサムネイルの下にあるアップロード ボタンをクリックしても、以前に正常にアップロードされたファイルは消えないことに注意してください。 |
ブラウズオンゾーンクリック | ブール値 | 間違い | |
自動置換 | ブール値 | 間違い | 現在の画像を自動的に置き換えるかどうか。true に設定すると、ファイルを再度選択すると、現在のファイルが置き換えられます。 |
GenerateFileId | 物体 | ヌル | |
プレビュークラス | 弦 | ヌル | プレビューボタンのクラス属性を追加する |
キャプションクラス | 弦 | ヌル | タイトルクラス属性を追加 |
フレームクラス | 弦 | 「クラジーデフォルト」 | 各サムネイルのフレーム |
メインクラス | 弦 | 'ファイルキャプション-メイン' | 要素クラス属性の場合 |
メインテンプレート | 物体 | ヌル | |
精製HTML | ブール値 | 真実 | |
ファイルサイズゲッター | 物体 | ヌル | |
初期キャプション | 弦 | ヌル | |
初期プレビュー | 配列/オブジェクト | [] | このパラメータを通じて、ファイル領域のデフォルトのサムネイルをいくつか設定できます。 |
初期プレビュー区切り文字 | 弦 | 「$$」 | |
初期プレビューとしてデータ | ブール値 | 間違い | |
初期プレビューファイルタイプ | 弦 | '画像' | |
InitialPreviewConfig 配列/オブジェクト | [] | ||
初期プレビューサムタグ | 配列/オブジェクト | [] | |
プレビューサムタグ | 物体 | {} | |
初期プレビュー表示削除 | ブール値 | 真実 | |
RemoveFromPreviewOnError | ブール値 | 間違い | |
削除URL | 弦 | ヌル | 画像削除時のリクエストパス |
追加データの削除 | 物体 | {} | 画像を削除するときに渡される追加パラメータ |
上書き初期 | ブール値 | 真実 | |
プレビューズームボタンアイコン | オブジェクト {前: ”,次: ”,トグルヘッダー: ”,全画面: ”,ボーダーレス: ”,閉じる: ”}, | ||
プレビューズームボタンクラス | 物体 | {prev: ‘btn btn-navigate’,next: ‘btn btn-navigate’,toggleheader: ‘btn btn-default btn-header-toggle’,fullscreen: ‘btn btn-default’,borderless: ‘btn btn-default’,close: ‘btn btn-default’}, | |
preferIconicPreview | Boolean | false | |
preferIconicZoomPreview | Boolean | false | |
allowedPreviewTypes | undefined | undefined | |
allowedPreviewMimeTypes | Object | null | |
allowedFileTypes | Object | null | 接收的文件后缀,如[‘jpg’, ‘gif’, ‘png’],不填将不限制上传文件后缀类型 |
allowedFileExtensions | Object | null | 指出带有哪些后缀名的文件才是被接受上传的,设置msgInvalidFileExtension |
defaultPreviewContent | Object | null | |
customLayoutTags | Object | {} | |
customPreviewTags | Object | {} | |
previewFileIcon | String | 空 | 当文件无法被预览时出现在缩略图中的图标,默认是 |
previewFileIconClass | String | ‘file-other-icon’ | |
previewFileIconSettings | Object | {} | 可以将不同的后缀的文件有不同的缩略图图标 |
previewFileExtSettings | Object | {} | |
buttonLabelClass | String | ‘hidden-xs’ | |
browseIcon | String | 空 | |
browseClass | String | ‘btn btn-primary’ | 指出了右下角选择按钮的样式。一般尽量不要用btn-sm和btn-lg,会和左边的输入框不协调 |
removeIcon | String | 空 | 删除按钮相关的属性 |
removeClass | String | ‘btn btn-default’ | |
cancelIcon | String | 空 | |
cancelClass | String | ‘btn btn-default’ | |
uploadIcon | String | 空 | 上传按钮相关的属性 |
uploadClass | String | ‘btn btn-default’ | |
uploadUrl String | null | 上传文件路径 | |
uploadAsync | boolean | true | 是否为异步上传 |
uploadExtraData | Object | {} | 上传文件时额外传递的参数设置 |
zoomModalHeight | number | 480 | |
minImageWidth | String | null | 图片的最小宽度 |
minImageHeight | String | null | 图片的最小高度 |
maxImageWidth | String | null | 图片的最大宽度 |
maxImageHeight | String | null | 图片的最大高度 |
resizeImage | Boolean | false | |
resizePreference | String | ‘width’ | |
resizeQuality | number | 0.92 | |
resizeDefaultImageType | String | ‘image/jpeg’ | |
minFileSize | number | 0 | 单位为kb,上传文件的最小大小值 |
maxFileSize | number | 0 | 单位为kb,如果为0表示不限制文件大小 |
resizeDefaultImageType | number | 25600(25MB) | |
minFileCount | number | 0 | 表示同时最小上传的文件个数 |
maxFileCount | number | 0 | 表示允许同时上传的最大文件个数 |
validateInitialCount | Boolean | false | |
msgValidationErrorClass | String | ‘text-danger’ | |
msgValidationErrorIcon | String | 空 | |
msgErrorClass | String | ‘file-error-message’ | |
progressThumbClass | String | “progress-bar progress-bar-success progress-bar-striped active” | |
rogressClass | String | “progress-bar progress-bar-success progress-bar-striped active” | |
progressCompleteClass | String | “progress-bar progress-bar-success” | |
progressErrorClass | String | “progress-bar progress-bar-danger” | |
progressUploadThreshold | number | 99 | |
previewFileType | String | ‘image’ | 预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式 |
elCaptionContainer | String | null | |
elCaptionText | String | null | 设置标题栏提示信息 |
elPreviewContainer | String | null | |
elPreviewImage | String | null | |
elPreviewStatus | String | null | |
elErrorContainer | String | null | |
errorCloseButton | String | ×’ | |
slugCallback | function | null | 选择后未上传前 回调方法 |
dropZoneEnabled | Boolean | true | 是否显示拖拽区域 |
dropZoneTitleClass | String | ‘file-drop-zone-title’ | 拖拽区域类属性设置 |
fileActionSettings | Object | {} | 设置预览图片的显示样式 |
otherActionButtons | String | 空 | 编码设置 |
textEncoding | String | ‘UTF-8’ | |
ajaxSettings | Object | {} | |
ajaxDeleteSettings | Object | {} | |
showAjaxErrorDetails | Boolean | true |
(二)Method 方法介绍
方法名 | 描述 |
---|---|
fileerror | 异步上传错误结果处理$(‘#uploadfile’).on(‘fileerror’, function(event, data, msg) {}); |
fileuploaded | 异步上传成功结果处理$(“#uploadfile”).on(“fileuploaded”, function (event, data, previewId, index) {}) |
filebatchuploaderror | 批量上传错误结果处理$(‘#uploadfile’).on(‘filebatchuploaderror’, function(event, data, msg) {}); |
filebatchuploadsuccess | 批量上传成功结果处理$(‘#uploadfile’).on(‘filepreupload’, function(event, data, previewId, index) {}); |
filebatchselected | 选择文件后处理事件$(“#fileinput”).on(“filebatchselected”, function(event, files) {}); |
upload | 文件上传方法$(“#fileinput”).fileinput(“upload”); |
fileuploaded | 上传成功后处理方法$(“#fileinput”).on(“fileuploaded”, function(event, data, previewId, index) {}); |
filereset | Possible values: http, https, ws, wss. |
fileclear | 点击浏览框右上角X 清空文件前响应事件$(“#fileinput”).on(“fileclear”,function(event, data, msg){}); |
filecleared | 点击浏览框右上角X 清空文件后响应事件$(“#fileinput”).on(“filecleared”,function(event, data, msg){}); |
fileimageuploaded | 在预览框中图片已经完全加载完毕后回调的事件 |
事件案例:filepreremove 在删除前触发事件 fileremoved在删除触发事件 调用通过on调用
$("#fileinputid").on("fileremoved", function (event, key, key2, data) {
getMeg();
});
文件批量被选择后触发 (常用功能 选择完成后调用上传功能upload)。
$("#fileinputid").on('filebatchselected', function (event, data) {
$("#fileinputid").fileinput("upload");
//选择完成后主动上传
});
自定义事件: 在源码定义位置使用self._raise(‘filepreremove’, [id, ind]);
filepremove 表示方法名 后面是参数数组 传两个参数 。无参数空数组即可。
对外可用方法:启用缩略图上删除功能方法 通过fileinput(方法名)启用:
$(“#fileinputid”).fileinput(‘_initFileActions’);//这行代码绑定删除remove事件的 无ajax $(“#fileinputid”).fileinput(‘_initPreviewActions’);//这行代码绑定删除delete事件的 ajax
_initFileActions 是remove _initPreviewActions 是delete 不一样 一般使用第一种
upload 方法 调用后上传选择的图片。
clear 清除方法 清除非initpreview的文件
reset 清除方法 清除所有文件
二、增加页面的文件上传
(一)bootstrap-fileinput文件上传功能
1.先引入js依赖
<th:block th:include="include :: bootstrap-fileinput-css" />
<th:block th:include="include :: bootstrap-fileinput-js" />
2.在html上面写入文件框
<div class="file-loading">
<input id="singleFile" name="file" type="file" >
</div>
(二)根据若依给出的示例引用和改进
1.直接引用若依框架所给的js代码,这个代码不管是不是若以框架都可以使用。
//这里直接用js的ready方法,就是说等这个页面全部加载完之后就去执行写入的js
$(document).ready(function(){
//单文件上传
$("#singleFile").fileinput({
uploadUrl: prefix + "/upload",//文件的上传路径,与后端一致,其中prefix为var prefix = ctx + "common/gongcheng";即你的后台的引用路径
language: 'zh',//设置语言
allowedFileExtensions:['image', 'html', 'text', 'video', 'audio', 'flash', 'object','png','jpg','db','txt','pdf'],//允许上传的文件类型,错误会给出提示
dropZoneTitle: '可以将文件拖放到这里,支持文件上传',
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;
//这里我用了一个隐藏域接收了从后端map集合里的一个fjid属性,根据id进行赋值操作
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('')
})
});
2.后台所需要的实体类
我这个是在工程页面传入一个文件,所以会有两个实体类,一个是工程实体类,一个是附件实体类,我的实现逻辑是先传入文件,然后得到一个文件id,把这个id传到add页面的隐藏域中,然后后台在添加时调用隐藏域传递过来的id,根据文件id增加文件跟工程实体类的glid。
这个是我的隐藏域所传的值:
<input type="hidden" name="fjid" id="fjid">
在文件upload方法里面把fjid这个属性赋值,把后台传过来的付给他
}).on('fileuploaded',function(event,data,previewId,index) {
var rsp = data.response;
document.getElementById('fjid').value = rsp.fjid;
然后后台调用增加方法
(三)根据uploadUrl进行上传
/**
* 资料上传请求(单个)
* @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);
//设置文件的name
pmsFujian.setName(fname);
//设置文件的大小
pmsFujian.setCssize(file.getSize());
//设置文件的原始文件名称,即上传的文件名称
pmsFujian.setCsname(file.getOriginalFilename());
//设置文件所属的工程模块
pmsFujian.setMkmc("工程资料");
//调用文件的新增方法,添加到数据库
pmsFujianService.insertPmsFujian(pmsFujian);
//再添加到数据库后,得到了文件的id
String fjid = pmsFujian.getFjid();
//创建一个ajax结果,这个ajax继承map集合,相当于一个map集合
AjaxResult ajax = new AjaxResult();
ajax.put("url",url);
ajax.put("name", fname);
ajax.put("fjid",fjid);
ajax.put("fileName", fileName);
返回map集合,也就是前端页面中rsp.data的数据
return ajax;
} catch (Exception e) {
return AjaxResult.error(e.getMessage());
}
}
运行完这个方法以后,已经把文件增加到了数据库,此时文件的数据库都有值,把文件的id添加到ajax集合,返回到前端页面,利用
}).on(‘fileuploaded’,function(event,data,previewId,index) {
var rsp = data.response;
document.getElementById(‘fjid’).value = rsp.fjid;
赋值给fjid,传到工程增加的controller层
/**
* 新增保存工程
*/
@RequiresPermissions("common:gongcheng:add")
@Log(title = "工程", businessType = BusinessType.INSERT)
@PostMapping("/add")
@ResponseBody
public AjaxResult addSave(PmsGongcheng pmsGongcheng,String fjid) throws IOException {
return toAjax(pmsGongchengService.insertPmsGongcheng(pmsGongcheng,fjid));
}
其中,pmsGongchengService.insertPmsGongcheng(pmsGongcheng,fjid)中的操作为
/**
* 新增工程
*
* @param pmsGongcheng 工程
* @return 结果
*/
@Override
public int insertPmsGongcheng(PmsGongcheng pmsGongcheng,String fjid,String jcfa)
{
//先进行工程的增加
int i = pmsGongchengMapper.insertPmsGongcheng(pmsGongcheng);
//判断是否有文件上传,如果有文件上传,执行下步操作
if (!fjid.isEmpty()) {
//获取工程的id
String gcid = pmsGongcheng.getGcid();
//根据文件的id拿到在数据库中的那条文件数据
PmsFujian pmsFujian = pmsFujianMapper.selectPmsFujianByFjid(fjid);
//把文件数据中的glid属性赋值
pmsFujian.setGlid(gcid);
//更新文件数据库中的这条信息
pmsFujianMapper.updatePmsFujian(pmsFujian);
}
return i;
}
(四)完成效果图
三、编辑(修改)界面文件的上传,回显,删除(数据库同时删除)的操作 )
(一)编辑界面文件的上传
这个跟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("/deletePic")
@ResponseBody
//传入从前台过来的key
public AjaxResult delete(String key){
return toAjax(pmsFujianService.deletePmsFujianByFjid(key));
}
这样就实现了前端实现文件移除时后端也删除了文件数据库中对应的文件信息