bookstrap插件 FileInut入门使用

    最近做了个PHP项目，里面有个功能要求上传图片前可预览等等。于是，为了更好的实现这个功能，能有较好的用户体验，我采用bootstrap插件——FileInput。

     bootstrap  FileInput是一款基于Bootstrap 3.x和JQuery的HTML5文件输入插件。FileInput不但样式界面美观，并且支持上传文件预览，ajax同步或者异步上传，拖动文件上传等。

前面有提交到 FileInput是一款基于Bootstrap 3.x和JQuery的HTML5文件输入插件，所以我们在使用FileInput之前，确定我们的html文件已经引入了bootstrap 3.x和JQuery的资源文件。

准备好以上工作，我们可以在github上下载FileInput的资源文件。将相应的文件放入对于的目录，我们需要引入下面的两个文件，方可能使用FileInput。

  <link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css">
  <script src="js/fileinput.js" type="text/javascript"></script>

FileInput默认显示英文，如果想要中文化，还需要引入一个文件。

  <script src="js/fileinput_locale_zh.js" type="text/javascript"></script> 

一般情况下，我们需要在使用Fileinput的input type=file里面加上“class="file"”，这样input type=file才能有以上的样式效果。multiple data-mian-file-count="1"为设置改文件选择数量为1，具体的可以去看FileInput的API文档。

我们根据自己的需要来写一个初始化FileInput控件的js函数。

这样就达成文件上传可以预览功能。如果input type=file写在form标签里，那文件的上传处理和普通input file处理是一样。

但如果我们想要用ajax来上传图片，那么我们写一个ajax上传的js。

在这里要着重说一下，如果通过ajax提交表单，想要在FileInput显示已上传的文件，记得要重新初始化Fineinput控件配置参数。要不然FileInput的文件预览图将不会改变。