用法

Kai edited this page on 26 Apr 2017 · 1 revision

用法

注意

如果你将一个css class='file'属性赋予input标签，插件将自动把字段[input type="file"]转换为文件输入控件。但是，如果你想通过javascript单独初始化插件，那么请勿将cssclass='file'属性附加到'input'上（因为这将导致重复的初始化，并且JavaScript代码可能会被跳过不执行）。

步骤1

在网页头部加入链接。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 如果你想在上传之前修改图片大小需要加入canvas-to-blob.min.js  它必须在fileinput.min.js之前引入 -->
<script src="path/to/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<!-- 如果你想在最初的预览中排序/重新排列需要引入sortable.min.js  它必须在fileinput.min.js之前引入 -->
<script src="path/to/js/plugins/sortable.min.js" type="text/javascript"></script>
<!-- 如果你想在HTML文件预览中净化HTML内容则要引入purify.min.js is   它必须在fileinput.min.js之前引入 -->
<script src="path/to/js/plugins/purify.min.js" type="text/javascript"></script>
<!-- 主要的 fileinput 插件库 -->
<script src="path/to/js/fileinput.min.js"></script>
<!-- 如果你想在放大的模态页面中查看文件详细信息需要引入bootstrap.js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<!-- 可选，如果你需要像font awesome 这样的主题，就像下面的代码一样引入它 -->
<script src="path/to/js/fa.js"></script>
<!-- 可选，如果你需要转换语言或翻译，就包含这个库 -->
<script src="path/to/js/<lang>.js"></script>

你可能注意到了，除了fileinput.min.css和fileinput.min.js外，你必须要加载jquery.min.js和bootstrap.min.css。可选择加入fa.js主题文件来使用 font awesome 图标样式。可选择加入 语言.js，可以把插件翻译成你的语言。

可选的依赖插件

canvas-to-blob.min.js文件：是blueimp的JavaScript-Canvas-to-Blob插件的源代码。如果你想在上传之前修改图片大小,在fileinput.min.js之前需要先加载它。
sortable.min.js文件：是rubaxa可排序插件的源代码。如果你希望在初始预览中对缩略图进行排序，则需要先加载它。
purify.min.js文件：是cure53的DomPurify插件的源代码。如果你希望净化预览的HTML内容，则需要加载它。

步骤2a

在你的页面中初始化这个插件，像下面的样例代码一样：

// 使用默认参数初始化插件
$("#input-id").fileinput();// 使用插件参数初始化
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

#input-id是你页面中input标签（即，type=file）的id值，通过插件初始化这个标签会自动隐藏。

步骤 2b

或者，你可以直接将插件选项设置为任何输入，通过HTML5的data-*属性到你的输入域。

<input id="input-id" type="file" class="file" data-preview-file-type="text">

原文：https://github.com/kartik-v/bootstrap-fileinput/wiki/06.-%E7%94%A8%E6%B3%95

关于bootstrap fileinput一些的总结。相关推荐

Bootstrap fileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
bootstrap+fileinput插件实现可预览上传照片功能
图片.png 实际项目中运用: 图片.png 功能:实现上传图片,更改上传图片,移除图片的功能 <!DOCTYPE html> <html><head><me ...
Bootstrap FileInput(文件上传)中文API整理
下载地址.API和DOM地址(英语好的小伙伴可以看看) 下载地址:https://github.com/kartik-v/bootstrap-fileinput API文档 :http://plugi ...
为什么手机上传图片这么慢前端_解决BootStrap Fileinput手机图片上传显示旋转问题_心病_前端开发者...
最近因为项目需要用到了bootstrap fileinput的插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题.后来通过查询资料了解图片具有EXIF(Exchangeabl ...
php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...
本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...
SSM框架基于Bootstrap fileinput 实现文件上传功能
SSM框架基于Bootstrap fileinput 实现文件上传功能 pom.xml文件的配置想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <! ...
php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
kingedit 上传php_JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...
fileinput.js php,JS文件上传神器bootstrap fileinput的解析
这篇文章主要介绍了JS文件上传神器Bootstrap FileInput,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,具有一定的参考价值,感兴趣的小伙伴们可以 ...
bootstrap fileinput 文件上传和回显
官网下载文件http://plugins.krajee.com/file-input/demo bootstrap fileinput 是基于bootstrap基础上的上传插件,so必要的bootst ...

关于bootstrap fileinput一些的总结。

用法

用法

步骤1

步骤2a

步骤 2b

原文：https://github.com/kartik-v/bootstrap-fileinput/wiki/06.-%E7%94%A8%E6%B3%95

关于bootstrap fileinput一些的总结。相关推荐

最新文章

热门文章