Bootstrapファイルアップロードコンポーネント:Bootstrap fileinput

一、使用前の準備
1、Bootstrap File Inputソースコードダウンロードアドレス:https://github.com/kartik-v/bootstrap-fileinput/ 2、Bootstrap File Input APIアドレス:http://plugins.krajee.com/file-input
二、使用方法
1、依存jsファイルとcssファイルをインポートする:

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/fileinput.min.css" />
<script type="text/javascript" src="js/jquery-3.2.1.js" >script>
<script type="text/javascript" src="js/bootstrap.js" >script>
<script type="text/javascript" src="js/fileinput.js" >script>
<script type="text/javascript" src="js/zh.js" >script>
<script type="text/javascript" src="js/my.js" >script>

2、ファイル入力エリアを作成する

<form>
    <div class="form-group">
        <h3>Bootstrap File Input Demo1h3>
    div>

    <input name="uploadFile"  type="file" id="uploadFile" multiple class="file-loading" />
form>

3、my.jsファイルを作成し、ファイルアップロードコンポーネントを初期化する

$(function() {
    //   fileinput
    var fileInput = new FileInput();
    fileInput.Init("uploadFile", "http://127.0.0.1/testDemo/fileupload/upload.action");
});

//   fileinput
var FileInput = function() {
    var oFile = new Object();

    //   fileinput  （      ）
    oFile.Init = function(ctrlName, uploadUrl) {
        var control = $('#' + ctrlName);

        //          
        control.fileinput({
            language: 'zh', //    
            uploadUrl: 'http://127.0.0.1/testDemo/fileupload/upload.action', //     
            allowedFileExtensions: ['jpg', 'png', 'gif'], //       
            uploadAsync: true, //      

            showUpload: false, //        
            showRemove: true, //      
            showCaption: true, //      

            dropZoneEnabled: true, //        

            //minImageWidth: 50, //       
            //minImageHeight: 50,//       
            //maxImageWidth: 1000,//       
            //maxImageHeight: 1000,//       
            //maxFileSize:0,//   kb，   0         
            //minFileCount: 0,
            maxFileCount: 10, //               
            enctype: 'multipart/form-data',

            browseClass: "btn btn-primary", //    : btn-default、btn-primary、btn-danger、btn-info、btn-warning        
            previewFileIcon: "",

        });

        //             
        $("#uploadFile").on("fileuploaded", function(event, data, previewId, index) {

        });
    }
    return oFile;   //      oFile  ，  FileInput        
};

三、効果図
1、初期化画面:

2、マルチファイルアップロードを実現できる:

3、あるファイルをクリックすると、全画面プレビューを実現できる:

四、Options紹介
属性名
属性タイプ
説明説明
デフォルト
language
String
多言語設定、使用時に事前にlocalesフォルダの下の対応する言語ファイルを導入する必要があります、中国語zh、導入言語ファイルはfileinput.jsの後に置く必要があります
‘en’
showCaption
Boolean
選択したファイルの概要を表示するかどうか
true
showBrowse
Boolean
ブラウズボタンを表示するかどうか
true
showPreview
Boolean
プレビュー領域を表示するかどうか
true
showUpload
Boolean
アップロードボタンを表示するかどうか
true
showCancel
Boolean
キャンセルボタンを表示するかどうか
true
showClose
Boolean
閉じるボタンを表示するかどうか
true
showUploadedThumbs
Boolean
サムネイルを表示するかどうか
true
autoReplace
Boolean
現在の画像を自動的に置換するか、trueに設定した場合、再度ファイルを選択すると、現在のファイルが置換されます.
false
deleteUrl
String
画像削除時のリクエストパス
”
deleteExtraData
Object
画像を削除するときに追加されるパラメータ
{}
allowedFileTypes
Object
受信したファイル接尾辞、例えば[‘jpg’,‘gif’,‘png’]は、記入しないとアップロードファイル接尾辞タイプを制限しない
null
uploadUrl
String
アップロードファイルURL、すなわちバックグラウンド処理URL
null
uploadAsync
boolean
非同期アップロード
true
uploadExtraData
ファイルのアップロード時に追加で渡されるパラメータの設定
{}
minImageWidth
String
画像の最小幅
null
minImageHeight
String
画像の最小高さ
null
maxImageWidth
String
画像の最大幅
null
maxImageHeight
String
画像の最大高さ
null
minFileSize
number
単位kb、アップロードファイルの最小サイズ値
0
maxFileSize
number
単位kb、0であればファイルサイズを制限しない
0
inFileCount
number
同時に最小アップロードされたファイル数を示します
0
maxFileCount
number
同時にアップロードできる最大ファイル数を示します
0
previewFileType
String
プレビューファイルタイプには、['image','html','text','video','audio','flash','object','other']などのフォーマットが内蔵されています.
‘image’
elCaptionText
String
タイトルバーヒントの設定
null
dropZoneEnabled
boolean
ドラッグ領域を表示するかどうか
true
dropZoneTitleClass
String
ドラッグ領域クラスのプロパティ設定
‘file-drop-zone-title’
五、Method紹介
メソッド名
説明
使用法
fileerror
非同期アップロードエラー結果処理
$(‘#uploadfile’).on(‘fileerror’, function(event, data, msg) {});
fileuploaded
非同期アップロード成功結果処理
$(“#uploadfile”).on(“fileuploaded”, function (event, data, previewId, index) {})
filebatchuploaderror
同期アップロードエラー結果処理
$(‘#uploadfile’).on(‘filebatchuploaderror’, function(event, data, msg) {});
filebatchuploadsuccess
同期アップロード成功結果処理
$(‘#uploadfile’).on(‘filepreupload’, function(event, data, previewId, index) {});
filebatchselected
ファイル選択後のイベントの処理
$(“#fileinput”).on(“filebatchselected”, function(event, files) {});
upload
ファイルのアップロード方法
$(“#fileinput”).fileinput(“upload”);
fileuploaded
アップロード成功後の処理方法
$(“#fileinput”).on(“fileuploaded”, function(event, data, previewId, index) {});
filereset
fileclear
ブラウズボックス右上隅Xをクリックしてファイルをクリアする前にイベントに応答
$(“#fileinput”).on(“fileclear”,function(event, data, msg){});
filecleared
ブラウズボックス右上隅Xをクリックしてファイルをクリアし、イベントに応答します.
$(“#fileinput”).on(“filecleared”,function(event, data, msg){});
fileimageuploaded
プレビューボックスに画像が完全にロードされた後にコールバックされるイベント
六、ソースのダウンロード