bootstrap-fileinput
====================
An enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging & dropping files, viewing upload progress, and selectively previewing, adding, or deleting files.
![File Input Screenshot](https://lh3.googleusercontent.com/-3FiEmc_okc4/VBw_d2LBAJI/AAAAAAAAAL8/KbVj5X9Dus0/w596-h454-no/FileInput.jpg)
This plugin was initially inspired by [this blog article](http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/) and [Jasny's File Input plugin](http://jasny.github.io/bootstrap/javascript/#fileinput). But the plugin has now matured with various additional features and enhancements to be a complete (yet simple) file management tool and solution for web developers.
> NOTE: The latest version of the plugin v4.1.8 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details.
## Features
### File Input Features
1. The plugin will convert a simple HTML file input to an advanced file picker control. Will help fallback to a normal HTML file input for browsers not supporting JQuery or Javascript.
2. The file input consists of the following three sections with options and templates to control the display:
- **_file caption section_**: to display a brief information of the file(s) selected
- **_file action buttons section_**: to browse, remove, and upload files.
- **_file preview section_**: to display the selected files on client for preview (supports preview of image, text, flash, and video file types). Other file types will be displayed as normal thumbnails.
3. The plugin automatically converts an input with `type = file` to an advanced file picker input if you set its `class = file`. All options to the input can be passed as HTML5 `data` attributes.
4. Ability to select and preview multiple files. Uses HTML 5 File reader API to read and preview files. Displays the progress of files being being loaded onto the preview zone, in case many files are chosen.
5. Offers predefined templates and CSS classes which can be changed to style your file-input display as per your needs.
6. With **v1.5.0**, you can now configure the plugin to show an **initial preview of images/files** with **initial caption**
(more useful for record update scenarios). Refer the [`initialPreview`](https://github.com/kartik-v/bootstrap-fileinput/blob/master/README.md#initialpreview)
and [`initialCaption`](https://github.com/kartik-v/bootstrap-fileinput/blob/master/README.md#initialcaption) properties in the plugin options
section for configuring this.
7. Option to show/hide any or all of the following:
- caption section
- preview section
- upload button
- remove button
8. Customise the location of the target container elements to display the entire plugin, the caption container, the caption text, the preview container, preview image, and preview status.
9. For text file previews, autowrap the text to the thumbnail width, and show a wrap indicator link to display complete text on hover. You can customize the wrap indicator (which defaults to …).
10. Customise the messages for preview, progress, and files selected.
11. Upload action defaults to form submit. Supports an upload route/server action parameter for custom ajax based upload.
12. Triggers JQuery events for advanced development. Events currently available are `filereset`, `fileclear`, `filecleared`, `fileloaded`, and `fileerror`.
13. Disabled and readonly file input support.
14. Dynamically auto size the file captions for long file names exceeding container width.
15. Raise new `fileimageuploaded` event that fires after image is completely loaded on the preview container.
16. Autosize preview images when they exceed the size of the preview container.
17. Completely templatized and extensible to allow configuration of the file-input the way the developer wants.
18. Preview intelligence based on various file preview types. The inbuilt file support types are categorized as `image`, `text`, `html`, `video`, `audio`, `flash`, `object`, and `other`.
19. `allowedPreviewTypes`: You can now configure which all file types are allowed to be shown as a preview. This defaults to `['image', 'html', 'text', 'video', 'audio', 'flash', 'object']`. Thus all file types are treated as an object to preview by default. For exampleTo preview only `image` and `video`, you can set this to `['image', 'video']`.
20. `allowedPreviewMimeTypes`: In addition to `allowedPreviewTypes`, you can also control which all mime types can be displayed for preview. This defaults to null, meaning all mime types are supported.
>NOTE: With release 2.5.0 you can now control which file types or extensions are allowed for upload by setting `allowedFileTypes` and `allowedFileExtensions`.
21. `layoutTemplates`: Allows you to configure all layout template settings within one property. The layout objects that can be configured are: `main1`, `main2`, `preview`, `caption`, and `modal`.
22. `previewTemplates`: All preview templates for **each preview type** have been combined into one property, instead of separate templates for image, text etc. The keys are the formats as set in `allowedPreviewTypes` and values are the templates used for previewing. There are default prebuilt templates for each preview file type (`generic`, `image`, `text`, `html`, `video`, `audio`, `flash`, `object`, and `other`). The `generic` template is used only for displaying `initialPreview` content using direct markup.
23. `previewSettings`: Allows you to configure width and height for each preview image type. The plugin has default widths and heights predefined for each type i.e `image`, `text`, `html`, `video`, `audio`, `flash`, and `object`.
24. `fileTypeSettings`: Allows you to configure and identify each preview file type using a callback. The plugin has default callbacks predefined to identify each type i.e `image`, `text`, `html`, `video`, `audio`, `flash`, and `object`.
25. Replacing tags within templates has been enhanced. With this release it will automatically check for multiple occurrences of each tag to replace within a template string.
26. Manipulate events and add your own custom validation messages easily by returning output to abort uploads in any of the other events.
27. Support for translations and locales.
### File Upload Features
With release 4.0.0, the plugin now also includes inbuilt support for AJAX Uploads and selectively adding or deleting files. AJAX upload functionality are
built upon HTML5 FormData and XMLHttpRequest Level 2 standards. Most modern browsers do support this standard, but the plugin will automatically degrade to normal form based submission for unsupported browsers.
1. Add functionality for AJAX based UPLOAD using HTML5 FormData (most modern browsers support it). Will degrade to normal Form Based File submission if this is not supported.
2. To use AJAX Upload, one must set the `uploadUrl` property.
3. Enhance plugin to now allow files to be added, appended, removed (based on FEEDBACK from many). Thus one can append files to preview.
4. New DRAG & DROP zone available in preview to drag and drop files and append.
5. Delete or upload files one by one OR in batch.
6. If `showPreview` is set to false, or uploadUrl is not supported plugin will degrade to normal form based upload.
7. Configurable indicators for file awaiting upload, file successfully uploaded, files errored in upload.
8. Ability to add extra form data with ajax based uploads.
9. Upload progress bar and individu
Qshen
- 粉丝: 1706
- 资源: 419
最新资源
- 视觉打标机自动调焦距x_t全套技术资料100%好用.zip
- 2023-04-06-项目笔记 - 第三百六十八阶段 - 4.4.2.366全局变量的作用域-366 -2025.01.04
- 35364903207720733032389_企业文化塑造企业生命常青藤_魏杰着_中国发展.djvu
- 问题记录:开机提示emergency mode(紧急模式)如何处理 - Linux学习的那些事儿 - 博客园.html
- 2023-04-06-项目笔记 - 第三百六十八阶段 - 4.4.2.366全局变量的作用域-366 -2025.01.04
- 基于机器学习的android恶意代码检测完整源码+文档说明(高分项目)
- A9_TC_TC.pdf
- 信号与系统matlab仿真实验报告2024(学生提交).docx
- 函数信号发生器模电仿真multisim仿真 1.基本要求: 设计制作一个方波-三角波-正弦波信号发生器,供电电源为±12V 1)输出频率能在1KHZ~10KHZ 范围内连续可调 2)方波输出电压V
- 上下料龙门吊sw16全套技术资料100%好用.zip
- Qt VS CMake 编译qwindowkit
- 基于激光雷达的无人方程式赛车感知系统的Python实现及实践-含代码及解释说明
- 上下料倍速链循环输送线sw18可编辑全套技术资料100%好用.zip
- Ansys maxwell 变压器教学资料 包含 两套文件 1.全部基础功能的操作教学以及模型文件 包含 静态场,涡流场,瞬态场,静电场等所有基础功能 步骤教学 2. 以正激变压器及平面pcb变压器为
- 手动轨道车sw18可编辑全套技术资料100%好用.zip
- 视觉点胶+伺服打螺丝+压装+电测试生产线x_t全套技术资料100%好用.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈