一键采集上传常见的细节问题(一下需求收集平台-fileinput文件上传插件)

　　一键采集上传常见的细节问题(一下需求收集平台-fileinput文件上传插件)

　　本项目前端形式采用bootstrap-fileinput的风格。bootstrap-fileinput 是一个非常强大的文件上传插件。请注意，它是文件上传，而不仅仅是图像上传。当您第一次接触它时，您只需将其调整为您想要的样式。也花了半天时间。下面简单介绍一下需求采集平台项目中用到的插件的一些细节。

　　对了，别忘了详细阅读官方文档：Bootstrap File Input - © Kartik，英文，如果你看的话，你必须阅读它。

　　1. 提交模式

　　首先文档简单对比一下两种上传方式，一种是表单提交，一种是Ajax提交。从下图可以看出，官方推荐大家通过Ajax上传。显然，通过 Ajax 上传更自由，可以获得更多的功能。

　　2. 导入文件

　　然后你需要导入必要的 CSS 和 JS 文件。必须导入以下内容。调试了半天，发现插件没有导入。

　　引导程序.css

　　引导程序.js

　　jQuery.js

　　引导文件输入/css/fileinput.css

　　引导文件输入/js/fileinput.js

　　bootstrap-fileinput/js/locales/zh.js（中文文件，是否导入）

　　自己check in，找到对应的文件。以上6个必须导入。bootstrap-fileinput/js/plugins/目录下也有一些插件，根据具体要导入的功能而定。

　　3. 基本用法

　　下一步是使用插件。起初，我只是想改进一下文件类型表单的样式。默认的文件上传风格实在是让人无法忍受。

　　当不引入bootstrap-fileinput插件相关文件时，html代码如下：

文件输入

　　显示效果如下：

　　引入bootstrap-fileinput插件后，同样的html代码，显示效果如下：

　　基本文件引入后，添加一行js代码 $('#myfile').fileinput(); 在页面底部，会出现不同的效果。完整的HTML代码如下：

fileinput-example

fileinput-example

文件输入

$('#myfile').fileinput();

　　接下来，上传一些文件来试用默认样式。

　　看起来不错，项目最终看起来像这样：

　　该功能有一些限制，比如允许上传多张照片，但只能上传3张照片，每张照片最多只能达到1MB。要实现一些控制，有必要了解以下一些参数。

　　4. 控制参数

　　官方文档中有介绍，但是很多时候虽然有说明，但不一定能看懂。这个插件的功能我不是很熟悉。我刚刚达到了我想要的效果，我很感兴趣。可以自学。

　　以下是项目中配置的一些参数：

　　$("#input-id").fileinput({

showUpload: false,

previewFileType: 'any',

language: 'zh',

browseLabel: '图片多选',

browseClass: 'btn btn-default',

allowedFileTypes: ['image'], // 限制文件类型为图片

allowedFileExtensions: ['jpg', 'png'], // 限制文件后缀名为jpg,png,gif

maxFileCount: 3, // 限制最多3张图片

maxFileSize: 1024, // 限制图片大小，最大1024KB

allowedPreviewTypes: ['image'], // 允许预览的文件类型

initialCaption: '可以选择最多3张图片，格式为png或者jpg，大小不超过1M', // 初始化说明框框，比如该项目上默认显示：可以选择最多3张图片，格式为png或者jpg，大小不超过1M

layoutTemplates: {

main1: '{preview}\n' +

'\n' +

' \n' +

' {browse}\n' +

' {remove}\n' +

' \n' +

' {caption}\n' +

'',

footer: '\n' +

' {caption}{size}\n' +

''

}

}); // 修改默认样式，比如按钮移到左侧，预览窗口中图片的脚标等等（这里只显示文件名，如下图）

　　这里只是简单介绍一下bootstrap-fileinput插件的简单功能。更*敏*感*词*的学习还是要靠自己的研究，尤其是Ajax上传功能。作者的研究深度有限，暂时不做过多介绍。如果有机会，我会做深入研究和分享。