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();
});