标签：oda readonly 分享 extension 选择 demo1 int 浏览器 template
源地址：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即可。
View Code1 <input id="input-b1" name="input-b1" type="file" class="file">demo2:隐藏图预览细节
View Code1 <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 来控制占位符文本。
View Code1 <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...">demo4:设置只读和不可用
View Code1 <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">demo5:
通过js初始化fileinput，隐藏caption仅显示按钮，你可以使用一个类为file-loading的容器包裹input，从而在插件下载的时候显示一个旋转指示标。
View Code1 <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>demo6:改变整个插件的容量（比如组样式），和设置最大的上传文件为10。
View Code1 <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>demo7:使用data属性配置整个插件，这个例子展示了在html标签中的data属性中传递json（检查data-allowed-file-extensions是基于设置了allowedFileExtensions的）。
View Code1 <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>demo8:这个例子展示了配置属性用以Right-To-Left (RTL)模式和方向。这需要设置rtl属性可用，而且在css/fileinput.css之后要加载css/fileinput-rtl.css。这个例子中的插件是通过js初始化的，使用js要移除clalss file，当插件加载的时候要显示旋转图，就用file-loading来包裹住。
View Code1 <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>demo9:该demo展示了在bs模态框中渲染一个showUpload和showPreview为false的插件，也展示了通过设置elErrorContainer在自定义容器中渲染错误（不带预览）。
View Code1 <!-- 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">×</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>相关问题列表：Krajee Webtips Q & A forum，提问：click here
2.高级应用demo
demo1:设置最大上传为100kb，overwriteInitial设置为false，可以在加载时显示带有预置的图／文件和说明预览，在追加文件被覆盖的场景中，初始化预览通常显示，这对多文件上传非常有用。可以检查下哪样的初始化配置允许包含删除，下载和下载url的actions等细节。下载文件名是作为caption配置默认显示的。
View Code1 <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>demo2:跟demo1相似，overwriteinitial设置为true，在选择后初始化预览时会覆盖。这个demo展示了file的actions除caption外的文件名的设置。
View Code1 <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>demo3:插件作为一个单独按钮。
View Code1 <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>demo4:仅显示图片选择和预览，浏览，上传，移除按钮文本，样式和图标控制。
View Code1 <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>demo5:预览选择按钮，改变预览背景，只允许文件选择和预览。
View Code1 <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>demo6:使用模版增强自定义。比如，改变按钮从右至左。
View Code1 <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>demo7:运行时，使用插件方法改变输入，比如点击modify按钮禁用插件和改变插件选项。
View Code1 <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>demo8:仅允许image和video上传，你可能使用fileTypeSettings来做了配置用来验证文件类型。
View Code1 <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>
标签：oda readonly 分享 extension 选择 demo1 int 浏览器 template
原文地址：http://www.cnblogs.com/jiangtian/p/7782154.html
