06. 用法

用法

注意

如果你将一个css class='file'属性赋予input标签，插件将自动把字段[input type="file"]转换为文件输入控件。但是，如果你想通过javascript单独初始化插件，那么请勿将css class='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">