Bootstrap fileinput 使用心得

因为公司项目里面用到多文件上传，选来选取就用了bootstrp fileinput 

项目要求：1、支持预览  2、同步上传 3、上传前可以取消待上传文件  4、文件格式限制及文件大小限制  

1、对上传控件的配置

  $("#input-ke-2").fileinput({
            theme: "explorer", //主题
            language: 'zh',
            uploadUrl: "/Members/WorkOrder/PostAttachment",// 上传请求路径
            allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg', 'pdf'],//允许上传的文件后缀       
            uploadAsync: false, //是否允许异步上传
            showUpload: false,//是否显示上传按钮
            showCaption: false,//是否显示容器

        dropZoneEnabled: false,//是否显示拖拽区域 
            removeFromPreviewOnError:true,//是否移除校验文件失败的文件
            uploadExtraData: function (previewId, index) {   //额外参数 返回json数组  
                return {
                    'id': commId  // commId 为全局变量，可以给控件上传额外参数  

                };
            },
            layoutTemplates: {    //取消上传按钮
                actionUpload:'',
            },
            showPreview: true,      //显示预览   
            minFileCount: 1,   //最低文件数量
            maxFileCount: 3,   //最多文件数量
            maxFileSize: 512,  //允许文件上传大小
            overwriteInitial: true,
            previewFileIcon: '<i class="fa fa-file"></i>',
            initialPreviewAsData: true, // defaults markup  
            preferIconicPreview: false, // 是否优先显示图标  false 即优先显示图片
            previewFileIconSettings: { // configure your icon file extensions
                'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                'jpg': '<i class="fa fa-file-photo-o text-danger"></i>',
                'gif': '<i class="fa fa-file-photo-o text-muted"></i>',
                'png': '<i class="fa fa-file-photo-o text-primary"></i>',
                'jpeg': '<i class="fa fa-file-photo-o text-primary"></i>'
            },
        });

2、在配置完成后，对控件进行初始化  

    $("#input-ke-2").fileinput();

3、因为项目里面用的是同步上传，使用同步上传时，控件将文件数组发送给服务器，服务器依据传入的额外参数 和文件集合来 存储文件。（关于异步上传，控件会一个个的将文件发送给服务器，也就是有几个文件就会请求几次服务器），至于使用异步还是同步，还是依据项目的需求吧

4、关于如何后台如何接收文件，在最后会贴上代码。这里先将如何执行回调函数

5、

        $("#input-ke-2").on("filebatchuploadsuccess", function (event, data, previewId, index) {
            var result = data.response.result;//接收后台返回的数据       
            $.each(result, function (i, item)  //each函数会遍历从后台返回的错误信息
            {
                if (item.error != null) { abp.message.warn(item.error); return; }
            });
            $("#input-ke-2").fileinput('reset'); //重置上传控件（清空已文件）
            abp.notify.info("提交成功");       
        });

6、  这里提醒几个控件的方法

       var filesCount = $('#input-ke-2').fileinput('getFilesCount'); //获取控件选中的文件（不包括校验失败的文件，如 文件名、文件大小）

      $('#input-ke-2').fileinput('upload');        //然后触发插件开始上传文件

注意： 因为我用的是手动上传，故需要上面这个方法来执行控件上传。

后台代码：（我使用的是c#） 备注： 比较敏感信息 已用xxxx代替

      public JsonResult xxx(int id)
        {
            string[] extName = { ".jpg", ".gif", ".jpeg", ".png", ".pdf" };
            var _directory = xxxxxxx;
            // HttpFileCollection

            HttpFileCollection upload = System.Web.HttpContext.Current.Request.Files;

            List<FileViewOutput> fileInfoList = new List<FileViewOutput>();

            for (int i = 0; i < upload.Count; i++)
            {
                FileViewOutput fileInfo = new FileViewOutput();
                //限制上传文件数量
                if (upload.Count > 3) { fileInfo.Error = "上传文件超过限制"; return Json(fileInfo); }

                HttpPostedFileBase file = Request.Files[i];


                string ext = Path.GetExtension(file.FileName).ToLower();

                if (!extName.Contains(ext)) { fileInfo.Error = "请上传jpg、gif、jpeg、png、pdf格式文件"; return Json(fileInfo); };

                if (file.InputStream.Length > 512000) //1MB.
                {
                    fileInfo.Error = "上传的文件不要超过500k";
                    return Json(fileInfo);
                }
                var namefix = Guid.NewGuid().ToString() + "_" + DateTime.Now.ToString("HHmmss") + Path.GetExtension(file.FileName);
                string file_name = "/" + namefix;

                fileInfo.Url = "xxxxxxxx" + namefix;
                fileInfo.Name = file.FileName;

                file.SaveAs(_directory + file_name);

                fileInfoList.Add(fileInfo);

            }
            //保存工单附件
            根据 fileInfoList 和传递的id 进行文件的保存



            return Json(fileInfoList);

        }

项目展示：