網上關於該控制元件的使用文章還是比較多的，但是自己實踐和使用過程中還是出現點問題，自己寫點東西記錄下。

簡單說，該控制元件優勢支援同步、非同步上傳，介面美觀

所需css\js包，自尋尋找

bootstrap.css

fileinput.css

fileinput.min.js

fileinput_locale_zh.min.js  //漢化包

注：外掛中的小圖示不顯示是因為本地沒有圖示文字，可以自己下載，也可以引用CDN上的樣式：http://www.bootcdn.cn/。

_________________________________________________________________________________________

部分屬性 

可在<input ..>中直接新增的屬性

data-show-preview   true|false  //選擇檔案後是否顯示圖片

data-show-upload true|false  //是否顯示元件中的上傳按鈕，鑑於需要同步上傳，可以選擇設定為fals

multiple                        //，用於支援多選，可以通過js配置控制數量限制

readonly true|false //為看出什麼實際作用，true，false沒區別

data-allowed-file-extensions  ["csv","txt"] //限制 上傳的檔案型別，型別不符合會有提示
 

_________________________________________________________________________________________________________
在js中的配置屬性$("#ID").fileinput({});
language zh //設定語言包，zh代表大陸漢化包，其他地區請另外下載js

maxFileCount        int        //多選情況，數量的限制屬性，超過限制會有提示      

showUpload true|false //是否顯示上傳按鈕，與date-show-upload一致

<code class="language-js hljs  has-numbering">allowedPreviewTypes ['image']  //允許選擇檔案後顯示縮圖的檔案型別
</code><pre name="code" class="prettyprint"><code class="language-js hljs  has-numbering">maxFileSize         20000      //最大上傳限制,單位kb</code>
更多請看官方文件。。。。。。

關於同步上傳

新增multiple支援多張圖片上傳，貼上後臺程式碼(C#版)。

 if (FileUpload1.HasFile)
            {
                HttpFileCollection Files = HttpContext.Current.Request.Files;//該集合是所有fileupload檔案的集合。
                for (int i = 0; i < Files.Count; i++)
                {
                    HttpPostedFile PostedFile = Files[i];
                    if (PostedFile.ContentLength > 0)
                    {
                        string FileName = PostedFile.FileName;//檔名自行處理

                        string strPath = Server.MapPath("/") + "\\images\\fileImage\\";
                        PostedFile.SaveAs(strPath + FileName);
                    }
                   
                }
            }

關於非同步上傳，看程式碼 

  $("#FileUpload1").fileinput({
            language: 'zh',
            uploadUrl: "fileInput.ashx", //非同步上傳地址
            maxFileCount: 4, //上傳數量限制
            allowedFileExtensions: ['jpg', 'png', 'gif']

            //previewFileIcon: "<i class='glyphicon glyphicon-king'></i>" //選擇檔案後縮圖
        }).on("fileuploaded", function (event, data) {
            //非同步上傳後返回結果處理
            //後臺一定要返回json物件,空的也行。否則會出現提示警告。
            //返回物件的同時會顯示進度條，可以根據返回值進行一些功能擴充套件

        });

 注：fileInput.ashx檔案的儲存檔案與同步上傳程式碼一致，需要注意的是要返回json物件。否則會顯示警告，影響體驗