yii2-widget-fileinput英文文档翻译

Posted 2020-10-13 江天83

源地址：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即可。

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

View Code

demo2:隐藏图预览细节

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

View Code

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

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

View Code

demo4:设置只读和不可用

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

View Code

demo5:

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

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

View Code

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

 1 <div class="file-loading"> 
 2     <input id="input-b6" name="input-b6[]" type="file" multiple>
 3 </div>
 4 <script>
 5 $(document).on(‘ready‘, function() {
 6     $("#input-b6").fileinput({
 7         showUpload: false,
 8         maxFileCount: 10,
 9         mainClass: "input-group-lg"
10     });
11 });
12 </script>

View Code

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

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

View Code

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

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

View Code

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

 1 <!-- Button trigger modal -->
 2 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
 3   Launch Modal
 4 </button>
 5  
 6 <!-- Modal -->
 7 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 8   <div class="modal-dialog modal-lg" role="document">
 9     <div class="modal-content">
10       <div class="modal-header">
11         <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
12         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
13           <span aria-hidden="true">&times;</span>
14         </button>
15       </div>
16       <div class="modal-body">
17         <div class="file-loading">
18           <input id="input-b9" name="input-b9[]" multiple type="file"‘>
19         </div>
20         <div id="kartik-file-errors"></div>
21       </div>
22       <div class="modal-footer">
23         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
24         <button type="button" class="btn btn-primary" title="Your custom upload logic">Save</button>
25       </div>
26     </div>
27   </div>
28 </div>
29  
30  
31 <script>
32 $(document).on(‘ready‘, function() {
33     $("#input-b9").fileinput({
34         showPreview: false,
35         showUpload: false,
36         elErrorContainer: ‘#kartik-file-errors‘,
37         allowedFileExtensions: ["jpg", "png", "gif"]
38         //uploadUrl: ‘/site/file-upload-single‘
39     });
40 });
41 </script>

View Code

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

2.高级应用demo

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

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

View Code

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

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

View Code

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

 1 <div class="file-loading">
 2     <input id="input-20" type="file">
 3 </div>
 4 <script>
 5 $(document).on(‘ready‘, function() {
 6     $("#input-20").fileinput({
 7         browseClass: "btn btn-primary btn-block",
 8         showCaption: false,
 9         showRemove: false,
10         showUpload: false
11     });
12 });
13 </script>

View Code

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

 1 <div class="file-loading">
 2     <input id="input-21" type="file" accept="image/*">
 3 </div>
 4 <script>
 5 $(document).on(‘ready‘, function() {
 6     $("#input-21").fileinput({
 7         previewFileType: "image",
 8         browseClass: "btn btn-success",
 9         browseLabel: "Pick Image",
10         browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
11         removeClass: "btn btn-danger",
12         removeLabel: "Delete",
13         removeIcon: "<i class=\"glyphicon glyphicon-trash\"></i> ",
14         uploadClass: "btn btn-info",
15         uploadLabel: "Upload",
16         uploadIcon: "<i class=\"glyphicon glyphicon-upload\"></i> "
17     });
18 });
19 </script>

View Code

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

 1 <div class="file-loading">
 2     <input id="input-22" name="input22[]" type="file" accept="text/plain" multiple>
 3 </div>
 4 <script>
 5 $(document).on(‘ready‘, function() {
 6     $("#input-22").fileinput({
 7         previewFileType: "text",
 8         allowedFileExtensions: ["txt", "md", "ini", "text"],
 9         previewClass: "bg-warning"
10     });
11 });
12 </script>

View Code

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

 1 <div class="file-loading">
 2     <input id="input-23" name="input23[]" type="file" multiple>
 3 </div>
 4 <script>
 5 $(document).on(‘ready‘, function() {
 6     $("#input-23").fileinput({
 7         showUpload: false,
 8         layoutTemplates: {
 9             main1: "{preview}\n" +
10             "<div class=\‘input-group {class}\‘>\n" +
11             "   <div class=\‘input-group-btn\‘>\n" +
12             "       {browse}\n" +
13             "       {upload}\n" +
14             "       {remove}\n" +
15             "   </div>\n" +
16             "   {caption}\n" +
17             "</div>"
18         }
19     });
20 });
21 </script>

View Code

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

 1 <div class="file-loading">
 2     <input id="input-40" name="input40[]" type="file" class="file" multiple>
 3 </div>
 4 <br>
 5 <button type="button" class="btn btn-warning btn-modify">Modify</button>
 6 <script>
 7 $(document).on(‘ready‘, function() {
 8     $(".btn-modify").on("click", function() {
 9         var $btn = $(this), $input = $("#input-40");
10         if ($btn.text() == "Modify") {
11             $("#input-40").fileinput("disable").fileinput("refresh", {showUpload: false});
12             $btn.html("Revert");
13             alert("Hurray! I have disabled the input and hidden the upload button.");
14         }
15         else {
16             $("#input-40").fileinput("enable").fileinput("refresh", {showUpload: true});
17             $btn.html("Modify");
18             alert("Hurray! I have reverted back the input to enabled with the upload button.");
19         }
20     });
21 });
22 </script>

View Code

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

 1 <div class="file-loading">
 2     <input id="input-41" name="input41[]" type="file" multiple>
 3 </div>
 4 <script>
 5 $(document).on(‘ready‘, function() {
 6     $("#input-41").fileinput({
 7         maxFileCount: 10,
 8         allowedFileTypes: ["image", "video"]
 9     });
10 });
11 </script>

View Code