用法

注意

如果你将一个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.cssfileinput.min.js外,你必须要加载jquery.min.jsbootstrap.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

    在你的页面中初始化这个插件,像下面的样例代码一样: ```JavaScript // 使用默认参数初始化插件 $("#input-id").fileinput();

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

`#input-id`是你页面中`input`标签(即,`type=file`)的id值,通过插件初始化这个标签会自动隐藏。
## 步骤 2b
或者,你可以直接将插件选项设置为任何输入,通过HTML5的`data-*`属性到你的输入域。
```html
<input id="input-id" type="file" class="file" data-preview-file-type="text">

results matching ""

    No results matching ""