Bootstrap fileInput多文件同步异步上传(C#)

网上关于该控件的使用文章还是比较多的，但是自己实践和使用过程中还是出现点问题，自己写点东西记录下。

简单说，该控件优势支持同步、异步上传，界面美观

官方文档：点击打开链接

借鉴文档：点击打开链接

________________________________________________________________________________________

所需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对象。否则会显示警告，影响体验