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();
    });
posted @ 2017-05-03 10:40  学习会让你青春永驻  阅读(...)  评论(...编辑  收藏