| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
10年前发布

HtML5多文件上传:Bootstrap File Input

这是一个增强的 HTML5 文件输入控件,是一个 Bootstrap 3.x 的扩展,实现文件上传预览,多文件上传等功能。

特性

  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 images and text 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 and 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 and fileclear.
  13. Disabled and readonly file input support.
  14. Size of the entire plugin is less than 11KB (about 9KB for the minified JS and 2KB for the minified CSS).

示例

View the plugin documentation and plugin demos at Krajee JQuery plugins.

HtML5多文件上传:Bootstrap File Input

项目主页:http://www.open-open.com/lib/view/home/1401417333886

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1401417333886.html
文件上传 Bootstrap File Input