asp.net mvc下使用bootstrap fileinput 文件批量上传控件

引入：

[html]  view plain  copy

1. <link href="~/Content/bootstrap-fileinput-master/css/fileinput.css" rel="stylesheet" />  

[html]  view plain  copy

1. <script src="~/Content/bootstrap-fileinput-master/js/fileinput.js"></script>  
2. <script src="~/Content/bootstrap-fileinput-master/js/locales/zh.js"></script>  

使用：

[html]  view plain  copy

1. <div>  
2. @Html.DropDownListFor(m => m.ToUserList, ViewBag.ToUserIds as IEnumerable<SelectListItem>, new { @class = "form-control selectpicker", multiple = "1", data_live_search = true, data_live_search_placeholder = "搜索收件人", data_actions_box = true, title = "请选择收件人" })  
3. </div>  

初始化：

[html]  view plain  copy

1. <script>  
2. $(function () {  
3.            initFileInput("input-id");  
4.        })  
5.   
6.        function initFileInput(ctrlName) {  
7.            var control = $('#' + ctrlName);  
8.            control.fileinput({  
9.                hideThumbnailContent: true ,//是否显示图片  
10.                language: 'zh', //设置语言  
11.                uploadUrl: "/admin/Mail/xxxxxxxxxx", //上传的地址  
12.                allowedFileExtensions: ['jpg', 'gif', 'png', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'txt', 'zip', 'rar'],//接收的文件后缀  
13.                maxFilesNum: 5,//上传最大的文件数量  
14.                //uploadExtraData:{"id": 1, "fileName":'123.mp3'},  
15.                uploadAsync: true, //默认异步上传  
16.                showUpload: true, //是否显示上传按钮  
17.                showRemove: true, //显示移除按钮  
18.                showPreview: true, //是否显示预览  
19.                showCaption: false,//是否显示标题  
20.                browseClass: "btn btn-primary", //按钮样式  
21.                //dropZoneEnabled: true,//是否显示拖拽区域  
22.                //minImageWidth: 50, //图片的最小宽度  
23.                //minImageHeight: 50,//图片的最小高度  
24.                //maxImageWidth: 1000,//图片的最大宽度  
25.                //maxImageHeight: 1000,//图片的最大高度  
26.                maxFileSize: 4096,//单位为kb，如果为0表示不限制文件大小  
27.                //minFileCount: 0,  
28.                maxFileCount: 5, //表示允许同时上传的最大文件个数  
29.                enctype: 'multipart/form-data',  
30.                validateInitialCount: true,  
31.   
32.                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",  
33.                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",  
34.                layoutTemplates: {  
35.                    // actionDelete:'', //去除上传预览的缩略图中的删除图标  
36.                    actionUpload: '',//去除上传预览缩略图中的上传图片；  
37.                    actionZoom: ''   //去除上传预览缩略图中的查看详情预览的缩略图标。  
38.                },  
39.   
40.            }).on('filepreupload', function (event, data, previewId, index) {     //上传中  
41.   
42.                var form = data.form, files = data.files, extra = data.extra,  
43.                    response = data.response, reader = data.reader;  
44.                console.log('文件正在上传');  
45.                }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功  
46.   
47.                    if (imgUrl == null) {  
48.                        imgUrl = data.response.imageUrl[0]  
49.   
50.                    }  
51.                    else {  
52.                        imgUrl = imgUrl + ',' + data.response.imageUrl[0];  
53.                    }  
54.   
55.                console.log('文件上传成功！');  
56.   
57.                }).on('fileerror', function (event, data, msg) {  //一个文件上传失败  
58.                console.log('文件上传失败！');  
59.                })  
60.   
61.        }  
62. </script>