webbootstrap怎么上传数据（Web端文件上传从未如此简单）
webbootstrap怎么上传数据（Web端文件上传从未如此简单）【1】使用bower4、此外，它还包括基于AJAX的上传，拖放文件，查看上传进度以及有选择地预览，添加或删除文件。1、Bootstrap 3.x和4.x的增强型HTML 5文件输入以及各种文件的文件预览，提供多种选择，可恢复的块上传等；2、该插件允许您使用一种简单的方法来设置高级文件选择器/上传控件，该控件专为Bootstrap 3.x或4.x CSS3样式而设计；3、它通过提供支持来预览各种文件，即图像，文本，html，视频，音频，闪存和对象，进一步增强了文件输入功能。
介绍对于文件上传，我们并不陌生，html自带了上传文件表单，但是我们都知道，那些真的满足不了我们的大多数需求，诸如多选、预览、删除、拖拽等各类繁杂的功能，原生的文件上传Input确实很难满足我们的需求，因此就诞生了很多第三方的上传组件，比如大家熟知的百度WebUploader、之前我也有介绍过类似的组件，功能都非常丰富，大家可以根据自己的需求酌情选择，符合自己的需要才是最好的，当然原生的或许就够了呢！
Github
https://github.com/kartik-v/bootstrap-fileinput
此项目一共多大一千多次提交，60 发布以及，4k star，可见还是很受广大开发者的认可的！
功能描述
以下是借助翻译将功能大致描述下：
1、Bootstrap 3.x和4.x的增强型HTML 5文件输入以及各种文件的文件预览，提供多种选择，可恢复的块上传等；
2、该插件允许您使用一种简单的方法来设置高级文件选择器/上传控件，该控件专为Bootstrap 3.x或4.x CSS3样式而设计；
3、它通过提供支持来预览各种文件，即图像，文本，html，视频，音频，闪存和对象，进一步增强了文件输入功能。
4、此外，它还包括基于AJAX的上传，拖放文件，查看上传进度以及有选择地预览，添加或删除文件。
安装使用
【1】使用bower
bower install bootstrap-fileinput
【2】使用npm
npm install bootstrap-fileinput
【3】初始化，例如
//默认 $("#input-id").fileinput(); // 外加插件 $("#input-id").fileinput({'showUpload':false 'previewFileType':'any'});
所有特性
文件输入功能（翻译 意译）：
1、该插件将简单的HTML文件输入转换为高级文件选择器控件。对于不支持JQuery或Javascript的浏览器，将有助于回退到正常的HTML文件输入。
2、文件输入包含以下三个部分，其中包含用于控制显示的选项和模板：
- 文件标题部分：显示所选文件的简要信息
- 文件操作按钮部分：浏览，删除和上传文件。
- 文件预览部分：在客户端上显示所选文件以进行预览（支持图像，文本，闪存和视频文件类型的预览）。其他文件类型将显示为普通缩略图。
3、type = file如果设置了插件，插件会自动将输入转换为高级文件选择器输入class = file。输入的所有选项都可以作为HTML5 data属性传递 。
4、能够选择和预览多个文件。使用HTML 5文件阅读器API来读取和预览文件。如果选择了多个文件，则显示正在加载到预览区域的文件的进度。
5、提供预定义的模板和CSS类，可根据需要更改为文件输入显示的样式。
6、能够配置插件以显示带有初始标题的图像/文件的初始预览 （对于记录更新方案更有用）。参考initialPreview， initialPreviewConfig，和 initialCaption 插件选项部分中的属性用于配置此属性。
7、能够将内容缩放为详细预览。在预览中查看缩放内容的幻灯片，最大化为无边框或全屏预览。
8、能够通过拖放在初始预览中对内容进行排序/重新排列。
9、能够完全控制窗口小部件并控制样式和布局。
10、通过语言环境/翻译支持同一页面上的多语言小部件。
11、显示/隐藏以下任何或所有内容的选项：
- 标题部分
- 预览部分
- 上传按钮
- 删除按钮
12、自定义目标容器元素的位置以显示整个插件，标题容器，标题文本，预览容器，预览图像和预览状态。
13、对于文本文件预览，将文本自动换行到缩略图宽度，并显示环绕指示符以在悬停时显示完整文本。您可以自定义换行指示符（默认为...）。
14、自定义预览，进度和所选文件的信息。
15、上传操作默认为表单提交。支持上传路由/服务器操作参数，用于基于自定义ajax的上传
16、触发JQuery事件以进行高级开发。目前可用的事件是filereset， fileclear，filecleared，fileloaded，和fileerror。
17、已禁用和只读文件输入支持。
18、动态自动调整超过容器宽度的长文件名的文件标题。
19、提升fileimageuploaded在预览容器上完全加载图像后触发的新事件。
20、当预览图像超出预览容器的大小时自动调整大小。
21、完全模板化和可扩展，允许以开发人员想要的方式配置文件输入。
22、基于各种文件预览类型预览智能。内置的文件支持类型分类为 image，text，html，video，audio，flash， object，和other。
23、allowedPreviewTypes：您现在可以配置允许将哪些文件类型显示为预览。默认为['image' 'html' 'text' 'video' 'audio' 'flash' 'object']。因此，默认情况下，所有文件类型都被视为要预览的对象。对于只有exampleTo预览image 和video，你可以将其设置为['image' 'video']。要禁用所有文件类型的内容预览并将其显示previewIcon为缩略图，请将其设置为null，empty或false。
24、allowedPreviewMimeTypes：除此之外allowedPreviewTypes，您还可以控制可以显示哪些mime类型以供预览。默认为null，表示支持所有mime类型。>注意：对于2.5.0版，您现在可以通过设置allowedFileTypes和控制允许上载哪些文件类型或扩展名allowedFileExtensions。
25、layoutTemplates：允许您在一个属性中配置所有布局模板设置。可配置的布局的对象是：main1，main2， preview，caption，和modal。
26、previewTemplates：每种预览类型的所有预览模板都已合并为一个属性，而不是图像，文本等的单独模板。键是设置的格式allowedPreviewTypes，值是用于预览的模板。下面是每个预览文件类型（默认预置的模板generic，image，text，html， video，audio，flash，object，和other）。该generic模板仅用于initialPreview使用直接标记显示 内容。
27、previewSettings：允许您为每个预览图像类型配置宽度和高度。该插件具有默认的宽度和预定义的每个类型，即高度 image，text，html，video，audio，flash，和object。
28、fileTypeSettings：允许您使用回调配置和标识每个预览文件类型。该插件具有预定义识别不同类型即默认回调 image，text，html，video，audio，flash，和object。
29、替换模板中的标签已得到增强。使用此版本，它将自动检查要在模板字符串中替换的每个标记的多次出现。
30、通过在任何其他事件中将输出返回到中止上载，操作事件并轻松添加自己的自定义验证消息。
31、支持多语言和区域设置。
总结
好用的插件千千万，当你正缺少这样一个强大的文件上传组件时，bootstrap-fileinput或许能帮到你，它虽然不是我用过最好的，但至少能符合很多场景下的需求了，特别适合对于文件上传非常频繁的时候来说，真的非常有用，希望能给你带来帮助，当然您如果有更好的推荐，则感谢在评论区留言分享！
PS：笔者近期想深入的学习下Javascript 小伙伴们知道现在有什么书籍比较合适么，网络上的系统化的较少，想要系统的深入学习下，感谢推荐的道友们！
