yii2-widget-fileinput英文文档翻译

源地址：http://plugins.krajee.com/file-input

该插件是为bootstrap开发的增强版h5文件上传插件，具有多文件预览，多文件选择等功能。该插件提供了基于bootstrap3的文件选择及上传的简便途径。它的功能非常强大，支持的文件类型广泛，包括images, text, html, video, audio, flash, and objects等。包含ajax上传，文件拖拽，上传进度显示，以及可选择的预览，添加上传文件功能。

demo：http://plugins.krajee.com/file-input/demo

支持bs4.x，现在已经支持到v4.4.4，这版包含很多在小屏上的预览和样式提升。发布的4.0.0版本，支持基于 HTML 5 FormData和XHR2 protocol的ajax上传，这两个特性大多数现代浏览器都支持。也内置了基于ajax的文件删除。也支持上传中的文件追加，添加和删除文件。新增了对ajax上传的拖拽功能。如果某些情况下不支持HTML 5 FormData和XHR2 protocol，则降为普通的form提交。这个插件受到this blog article and Jasny's File Input plugin的影响。这款插件如今已拥有很多成熟的追加功能和提升，成为一款完整的文件管理器和web开发人员工具，尽管依旧简陋😊。

你可以参考这篇文章作为使用php基于ajax上传的例子。（refer this webtip）

note：如果没看到这个更新内容，请使用shift+f5强制刷新。

1.基础应用demo

demo1:自动转换file input成为一个bs input挂件，只需将class设置为file即可。

<input id="input-b1" name="input-b1" type="file" class="file">

demo2:隐藏图预览细节

<input id="input-b2" name="input-b2" type="file" class="file" data-show-preview="false">

demo3:使用file input属性（比如multiple），用来设置input行为和data属性，用以控制插件选项。比如隐藏和显示upload按钮和caption。需要注意的是，当文件上传，服务器代码必须接收一个文件数组，如果是php，必须使用数组作为input的命名规则。这个例子也展示了设置msgPlaceholder 来控制占位符文本。

<input id="input-b3" name="input-b3[]" type="file" class="file" multiple 
    data-show-upload="false" data-show-caption="true" data-msg-placeholder="Select {files} for upload...">

demo4:设置只读和不可用

<label for="input-b4a">Readonly Input</label>
<input id="input-b4a" name="input-b4a" type="file" class="file" readonly="true">
<br>
<label for="input-b4b">Disabled Input</label>
<input id="input-b4b" name="input-b4b" type="file" class="file" disabled="true">

demo5:

通过js初始化fileinput，隐藏caption仅显示按钮，你可以使用一个类为file-loading的容器包裹input，从而在插件下载的时候显示一个旋转指示标。

<label class="control-label">Select File</label>
<input id="input-b5" name="input-b5[]" type="file" multiple>
<script>
$(document).on('ready', function() {
    $("#input-b5").fileinput({showCaption: false});
});
</script>

demo6:改变整个插件的容量（比如组样式），和设置最大的上传文件为10。

<div class="file-loading"> 
    <input id="input-b6" name="input-b6[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    $("#input-b6").fileinput({
        showUpload: false,
        maxFileCount: 10,
        mainClass: "input-group-lg"
    });
});
</script>

demo7:使用data属性配置整个插件，这个例子展示了在html标签中的data属性中传递json（检查data-allowed-file-extensions是基于设置了allowedFileExtensions的）。

<div class="file-loading">
    <input id="input-b7" name="input-b7[]" multiple type="file" class="file" data-allowed-file-extensions='["csv", "txt"]'>
</div>

demo8:这个例子展示了配置属性用以Right-To-Left (RTL)模式和方向。这需要设置rtl属性可用，而且在css/fileinput.css之后要加载css/fileinput-rtl.css。这个例子中的插件是通过js初始化的，使用js要移除clalss file，当插件加载的时候要显示旋转图，就用file-loading来包裹住。

<link href="/path/to/css//css/fileinput.min.css" rel="stylesheet">
<link href="/path/to/css//css/fileinput-rtl.min.css" rel="stylesheet">
<div dir=rtl class="file-loading"> <!-- note the direction if you want to display file-loading indicator -->
    <!-- note that your input must just set the `rtl` data property of the plugin or in your javascript code -->
    <input id="input-b8" name="input-b8[]" multiple type="file"'>
</div>
<script>
$(document).on('ready', function() {
    $("#input-b8").fileinput({
        rtl: true,
        allowedFileExtensions: ["jpg", "png", "gif"]
    });
});
</script>

 demo9:该demo展示了在bs模态框中渲染一个showUpload和showPreview为false的插件，也展示了通过设置elErrorContainer在自定义容器中渲染错误（不带预览）。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch Modal
</button>
 
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="file-loading">
          <input id="input-b9" name="input-b9[]" multiple type="file"'>
        </div>
        <div id="kartik-file-errors"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" title="Your custom upload logic">Save</button>
      </div>
    </div>
  </div>
</div>
 
 
<script>
$(document).on('ready', function() {
    $("#input-b9").fileinput({
        showPreview: false,
        showUpload: false,
        elErrorContainer: '#kartik-file-errors',
        allowedFileExtensions: ["jpg", "png", "gif"]
        //uploadUrl: '/site/file-upload-single'
    });
});
</script>

相关问题列表：Krajee Webtips Q & A forum，提问：click here

2.高级应用demo

demo1:设置最大上传为100kb，overwriteInitial设置为false，可以在加载时显示带有预置的图／文件和说明预览，在追加文件被覆盖的场景中，初始化预览通常显示，这对多文件上传非常有用。可以检查下哪样的初始化配置允许包含删除，下载和下载url的actions等细节。下载文件名是作为caption配置默认显示的。

<label for="input-24">Planets and Satellites</label>
<div class="file-loading">
    <input id="input-24" name="input24[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    var url1 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg',
        url2 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg';
    $("#input-24").fileinput({
        initialPreview: [url1, url2],
        initialPreviewAsData: true,
        initialPreviewConfig: [
            {caption: "Moon.jpg", downloadUrl: url1, size: 930321, width: "120px", key: 1},
            {caption: "Earth.jpg", downloadUrl: url2, size: 1218822, width: "120px", key: 2}
        ],
        deleteUrl: "/site/file-delete",
        overwriteInitial: false,
        maxFileSize: 100,
        initialCaption: "The Moon and the Earth"
    });
});
</script>

demo2:跟demo1相似，overwriteinitial设置为true，在选择后初始化预览时会覆盖。这个demo展示了file的actions除caption外的文件名的设置。

<label for="input-25">Planets and Satellites</label>
<div class="file-loading">
    <input id="input-25" name="input25[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    var url1 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg',
        url2 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg';
    $("#input-25").fileinput({
        initialPreview: [url1, url2],
        initialPreviewAsData: true,
        initialPreviewConfig: [
            {caption: "Moon.jpg", filename: "MoonFull.jpg", downloadUrl: url1, size: 930321, width: "120px", key: 1},
            {caption: "Earth.jpg", filename: "EarthFull.jpg", downloadUrl: url2, size: 1218822, width: "120px", key: 2}
        ],
        deleteUrl: "/site/file-delete",
        overwriteInitial: true,
        maxFileSize: 100,
        initialCaption: "The Moon and the Earth"
    });
});
</script>

demo3:插件作为一个单独按钮。

<div class="file-loading">
    <input id="input-20" type="file">
</div>
<script>
$(document).on('ready', function() {
    $("#input-20").fileinput({
        browseClass: "btn btn-primary btn-block",
        showCaption: false,
        showRemove: false,
        showUpload: false
    });
});
</script>

demo4:仅显示图片选择和预览，浏览，上传，移除按钮文本，样式和图标控制。

<div class="file-loading">
    <input id="input-21" type="file" accept="image/*">
</div>
<script>
$(document).on('ready', function() {
    $("#input-21").fileinput({
        previewFileType: "image",
        browseClass: "btn btn-success",
        browseLabel: "Pick Image",
        browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
        removeClass: "btn btn-danger",
        removeLabel: "Delete",
        removeIcon: "<i class=\"glyphicon glyphicon-trash\"></i> ",
        uploadClass: "btn btn-info",
        uploadLabel: "Upload",
        uploadIcon: "<i class=\"glyphicon glyphicon-upload\"></i> "
    });
});
</script>

 demo5:预览选择按钮，改变预览背景，只允许文件选择和预览。

<div class="file-loading">
    <input id="input-22" name="input22[]" type="file" accept="text/plain" multiple>
</div>
<script>
$(document).on('ready', function() {
    $("#input-22").fileinput({
        previewFileType: "text",
        allowedFileExtensions: ["txt", "md", "ini", "text"],
        previewClass: "bg-warning"
    });
});
</script>

demo6:使用模版增强自定义。比如，改变按钮从右至左。

<div class="file-loading">
    <input id="input-23" name="input23[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    $("#input-23").fileinput({
        showUpload: false,
        layoutTemplates: {
            main1: "{preview}\n" +
            "<div class=\'input-group {class}\'>\n" +
            "   <div class=\'input-group-btn\'>\n" +
            "       {browse}\n" +
            "       {upload}\n" +
            "       {remove}\n" +
            "   </div>\n" +
            "   {caption}\n" +
            "</div>"
        }
    });
});
</script>

demo7:运行时，使用插件方法改变输入，比如点击modify按钮禁用插件和改变插件选项。

<div class="file-loading">
    <input id="input-40" name="input40[]" type="file" class="file" multiple>
</div>
<br>
<button type="button" class="btn btn-warning btn-modify">Modify</button>
<script>
$(document).on('ready', function() {
    $(".btn-modify").on("click", function() {
        var $btn = $(this), $input = $("#input-40");
        if ($btn.text() == "Modify") {
            $("#input-40").fileinput("disable").fileinput("refresh", {showUpload: false});
            $btn.html("Revert");
            alert("Hurray! I have disabled the input and hidden the upload button.");
        }
        else {
            $("#input-40").fileinput("enable").fileinput("refresh", {showUpload: true});
            $btn.html("Modify");
            alert("Hurray! I have reverted back the input to enabled with the upload button.");
        }
    });
});
</script>

demo8:仅允许image和video上传，你可能使用fileTypeSettings来做了配置用来验证文件类型。

<div class="file-loading">
    <input id="input-41" name="input41[]" type="file" multiple>
</div>
<script>
$(document).on('ready', function() {
    $("#input-41").fileinput({
        maxFileCount: 10,
        allowedFileTypes: ["image", "video"]
    });
});
</script>