Krajee插件的用法

 

第一步：

<!-- 必须引入 -->
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>

<!-- 再上传前调整图像大小，需要引入这个文件
     This must be loaded before fileinput.min.js -->
<script src="path/to/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>

<!-- 在初始预览中对文件进行排序，需要引入该文件
     This must be loaded before fileinput.min.js -->
<script src="path/to/js/plugins/sortable.min.js" type="text/javascript"></script>

<!-- 在HTML文件的预览时净化HTML的内容。（不知道怎么翻译）
     This must be loaded before fileinput.min.js -->
<script src="path/to/js/plugins/purify.min.js" type="text/javascript"></script>

<!-- 主要的插件文件 -->
<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>

<!-- 如果需要一个很棒的字体的主题，需要引入该文件 -->
<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可以选择性得作为字体、图标的样式。 如果需要，可以选择包括语言文件.js用于翻译您的语言。

可选的依赖插件：

1.canvas-to-blob.min.js文件是blueimp的JavaScript-Canvas-to-Blob插件的源代码。 如果您希望使用bootstrap-fileinput插件的图像调整大小的功能，则需要在fileinput.min.js之前加载。

2.sortable.min.js是 Sortable plugin by rubaxa的源文件。如果想在预览时对缩略图进行排序，则需要在fileinput.min.js之前加载。

3.purify.min.js file 是 DomPurify plugin by cure53. 的源文件。如果想在预览时对文件进行排序，则需要在fileinput.min.js之前加载。

第二步：

2.1初始化

// 默认方法
$("#input-id").fileinput();
 
// 用插件的选项
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});

 “#input-id"表明input的类型（好比 type=file的功能）

2.2或者，通过HTML标签将input设置为任何一种类型

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