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

本文主要是介绍asp.net mvc下使用bootstrap fileinput 文件批量上传控件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

引入：

 [html]  view plain copy 
<link href="~/Content/bootstrap-fileinput-master/css/fileinput.css" rel="stylesheet" />  

 [html]  view plain copy 
<script src="~/Content/bootstrap-fileinput-master/js/fileinput.js"></script>  
<script src="~/Content/bootstrap-fileinput-master/js/locales/zh.js"></script>  

使用：

 [html]  view plain copy 
<div>  
@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 = "请选择收件人" })  
</div>  

初始化：

 [html]  view plain copy 
<script>  
$(function () {  
           initFileInput("input-id");  
       })  
  
       function initFileInput(ctrlName) {  
           var control = $('#' + ctrlName);  
           control.fileinput({  
               hideThumbnailContent: true ,//是否显示图片  
               language: 'zh', //设置语言  
               uploadUrl: "/admin/Mail/xxxxxxxxxx", //上传的地址  
               allowedFileExtensions: ['jpg', 'gif', 'png', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'txt', 'zip', 'rar'],//接收的文件后缀  
               maxFilesNum: 5,//上传最大的文件数量  
               //uploadExtraData:{"id": 1, "fileName":'123.mp3'},  
               uploadAsync: true, //默认异步上传  
               showUpload: true, //是否显示上传按钮  
               showRemove: true, //显示移除按钮  
               showPreview: true, //是否显示预览  
               showCaption: false,//是否显示标题  
               browseClass: "btn btn-primary", //按钮样式  
               //dropZoneEnabled: true,//是否显示拖拽区域  
               //minImageWidth: 50, //图片的最小宽度  
               //minImageHeight: 50,//图片的最小高度  
               //maxImageWidth: 1000,//图片的最大宽度  
               //maxImageHeight: 1000,//图片的最大高度  
               maxFileSize: 4096,//单位为kb，如果为0表示不限制文件大小  
               //minFileCount: 0,  
               maxFileCount: 5, //表示允许同时上传的最大文件个数  
               enctype: 'multipart/form-data',  
               validateInitialCount: true,  
  
               previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",  
               msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",  
               layoutTemplates: {  
                   // actionDelete:'', //去除上传预览的缩略图中的删除图标  
                   actionUpload: '',//去除上传预览缩略图中的上传图片；  
                   actionZoom: ''   //去除上传预览缩略图中的查看详情预览的缩略图标。  
               },  
  
           }).on('filepreupload', function (event, data, previewId, index) {     //上传中  
  
               var form = data.form, files = data.files, extra = data.extra,  
                   response = data.response, reader = data.reader;  
               console.log('文件正在上传');  
               }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功  
  
                   if (imgUrl == null) {  
                       imgUrl = data.response.imageUrl[0]  
  
                   }  
                   else {  
                       imgUrl = imgUrl + ',' + data.response.imageUrl[0];  
                   }  
  
               console.log('文件上传成功！');  
  
               }).on('fileerror', function (event, data, msg) {  //一个文件上传失败  
               console.log('文件上传失败！');  
               })  
  
       }  
</script>  