fileinput 的总结

fileinput组件实战总结

fileinput是一个增强的基于Bootstrap3.x和HTML5的文件上传工具，具备多种格式文件的预览功能，

另外，它包含了基于AJAX的上传，拖拽和撤销文件，可以显示上传文件的进度，并且可以任意去预览，

添加，删除文件。

在本系统使用的功能

机构或银行图标的预览功能

使用fileinput

如果要使用fileinput组件，需要引入相应的css和js文件

• 引入css文件

  <link rel="stylesheet" href="/genius/static/plugins/fileInput/fileinput.css">

• 引入js文件

  <script src="/genius/static/plugins/fileInput/fileinput.js"></script>
  <script src="/genius/static/plugins/fileInput/zh.js"></script>//汉化文件

• html初始化

将input输入框的type设置为file，同时设定一个id。

<div class="col-sm-8">
   <input type="file" id="input-2" class="form-control" placeholder="" name="license">
</div>

• js初始化简介

• $('#input-2').fileinput({
  fileinputLocales: 'zh',   //设置语言
  allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//接收的文件后缀
  showUpload: false,        //是否显示上传按钮
  removeLabel: '移除',
  showCaption: false,       //是否显示标题
  showRemove:false,         //是否显示移除按钮
  showClose:false,          //是否显示关闭按钮
  showPreview:true,         //是否显示预览功能
  maxFileSize: 4096,        //设置最大的上传字节
  browseClass: "btn btn-primary", //按钮样式
  enctype: 'multipart/form-data',
  previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
  fileSingle: '文件',
  filePlural: '个文件',
  browseLabel: '选择 &hellip;',
  removeLabel: '移除',
  removeTitle: '清除选中文件',
  overwriteInitial: true,
  autoReplace :true,
  initialPreview: [
  'http://'+dataImgUrl+'?r='+Math.random(),
  ],
  previewSettings:{
      width:"100%",
  },
  initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
  initialPreviewFileType: 'image', // image is the default and can be overridden in config below
  initialPreviewConfig: [
      { width: "100%",},
  ],
  
  });

  使用过程中所遇到的问题

• form表单的编码类型

  因为使用了input[type=file]，一定要注意form表单要声明编码类型为enctype="multipart/form-data"。

• 当input的class中有file时会导致初始化错误

  如果将使用了fileinput初始化的input输入框的class设置为file的话，fileinput对于该输入框的设置无效。

• 当在页面中打开多个fileinput初始化后的input时，存在fileinput输入框的缓存问题。在项目机构管理处应用时，

  在机构列表中点击每一个机构都可以查看此机构的详情-当然包括营业执照和签署协议的详情。当我们点击了机构1的详情，
  
  fileinput初始化了模态框中的图片预览。当我们关闭机构1的详情，再去打开机构2的详情框时，显示的预览图片还是
  
  机构1的，这时对于input的二次初始化就不起作用了。这时的解决方法是手动操作dom,手动设置image的src属性。
  
  代码如下：

  $('.file-preview-image').each(function (){
  this.src= 'http://'+dataImgUrl+'?t='+new Date().getTime();
  });