bootstrap fileinput 初始化图片 删除回调等

近期项目使用fileinput这个插件 主要是官方网站全部英文,个人能力有限,只能粗略解析,如有错误, 请提出!

官方网址:http://plugins.krajee.com/file-input   建议大家可以去看看


功能相关代码:

[javascript]  view plain  copy
  1. $("#inputfile").fileinput({  
  2.         language: 'zh'//设置语言  
  3.         uploadUrl: "{:U('localhost/learnFileUpload')}"//上传的地址  
  4.         allowedFileExtensions : ['jpg''png','gif''jpeg'],//接收的文件后缀  
  5.         initialPreview: [  
  6.                  "+imagePath+"' class='file-preview-image'>"  
  7.              ],  
  8.         showUpload: false//是否显示上传按钮  
  9.         showRemove:false// 是否显示移除按钮  
  10.         showCaption: false,//是否显示标题  
  11.         showPreview: true,// 是否预展示图片  
  12.         maxFileCount:1,//上传图片最大数量  
  13.         maxImageHeight:67,// 上传图片最大高度  
  14.         initialPreviewConfig: [{  
  15.                caption: 'desert.jpg',// 展示的图片名称  
  16.                width: '120px',// 图片高度  
  17.                url: '{:U('localhost/delete')}',// 预展示图片的删除调取路径  
  18.                key: 100,// 可修改 场景2中会用的  
  19.                extra: {id: 100} //调用删除路径所传参数   
  20.            }],  
  21.         enctype: 'multipart/form-data',// 上传图片的设置  
  22.         browseClass: "btn btn-primary"//按钮样式  
  23.         uploadExtraData:{},上传路径的参数  
  24.         previewFileIcon: ""// 按钮样式  
  25.     }).on('fileuploaded'function(event, data, id, index) { // 上传按钮的回调事件  
  26. if (data.response.result == 3) {  
  27.                 window.parent.location.href = "{:U('Login/disp')}";  
  28. else {  
  29.          $("#img_path").val(data.response.fileMsg);  
  30.     $('#content').html(data.response.content);  
  31. }  
  32. });  


场景1:新增图片,并上传之后的删除bootstrap fileinput 初始化图片 删除回调等_第1张图片

[javascript]  view plain  copy
  1. $('#input-id').on('filesuccessremove'function(event, id) {  
  2.     if (some_processing_function(id)) {  
  3.        console.log('Uploaded thumbnail successfully removed');  
  4.     } else {  
  5.         return false;   
  6.     }  
  7. });  
其中:input-id为页面设定的input标签的ID

filesuccessremove 为对应的名称

此方法内可以写具体删除过程中的相关操作


场景2: 存在默认图片,页面加载完之后的删除

bootstrap fileinput 初始化图片 删除回调等_第2张图片


这个删除有是有对应的方法的:

方法1:删除预处理(删除之前想要做什么事)

[javascript]  view plain  copy
  1. $('#input-id').on('filepredelete'function(event, key) {  
  2.     console.log('Key = ' + key);  
  3. });  
方法2:删除后的处理(删除图片时想要做什么事)

[javascript]  view plain  copy
  1. $('#input-id').on('filedeleted'function(event, key) {  
  2.     console.log('Key = ' + key);  
  3. });  

对于那些未上传的图片删除功能应该没有什么特别想做的事情,因为他不会影响到系统上任何东西,个人也就没有特别研究


另外,有预设图片显示在插件中,当选择新图片时,会把之前的预设图片删除掉

添加overwriteInitial:false可以解决。


你可能感兴趣的:(bootstrap fileinput 初始化图片 删除回调等)