Bootstrap fileinput 使用心得

来源：互联网发布：紫云剑淘宝编辑：程序博客网时间：2024/05/29 15:53

因为公司项目里面用到多文件上传，选来选取就用了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);        }

项目展示：

阅读全文

1 0