fileinput组件实战总结

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

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

添加，删除文件。

在本系统使用的功能

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

使用fileinput

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

• 引入css文件

• 引入js文件

//汉化文件

• html初始化

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

• 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: "",     fileSingle: '文件',    filePlural: '个文件',    browseLabel: '选择 …',    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();});