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

   

   

转载于:https://www.cnblogs.com/valarchie/p/7496545.html

总结

以上是生活随笔为你收集整理的fileinput 的总结的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。