bootstrap fileinput+MVC 上传多文件,保存

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

新增用户资料,需要用户上传多笔附件,所以就尝试用了fileinput控件,显示效果如图:

首先,先在model中定义数据模型:

public partial class create

{

       [Required]

       [Display(Name = "附件")]

       public HttpPostedFileBase[] attach { get; set; }

}

视图中定义控件:

<div class="form-group">

                @Html.LabelFor(m => m.attach, new { @class = "col-sm-3 control-label" })

                <div class="col-sm-7">

                    @Html.TextBoxFor(model => model.attach, new { type = "file", multiple = "multiple", accept = "application/msword,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document" })

                    @Html.ValidationMessageFor(m => m.attach, "", new { @class = "text-danger" })

                </div>

            </div>

该控件的类型是multiple,可以选择多个文件;accept属性是可选择的文件类型,这里我们要去只能选择doc docx pdf ,需支持其他类型的可自行百度;ValidationMessageFor是必填

js中调用该控件:

 var url = rootUrl + "attachment/upload";

 $("#attach").fileinput({

     theme: "explorer", //主题

     language: 'zh',

     uploadUrl: url,// 上传请求路径

     allowedFileExtensions : ["pdf", "doc","docx"],//允许上传的文件后缀

     showUpload: false,//是否显示上传按钮

     showCaption: false,//是否显示容器

     dropZoneEnabled: false,//是否显示拖拽区域

     removeFromPreviewOnError: true,//是否移除校验文件失败的文件

     layoutTemplates: {

         actionUpload: '',   //取消上传按钮

         actionZoom: ''      //取消放大镜按钮

     },

     showPreview: true,      //显示预览

     minFileCount: 1,   //最低文件数量

     //maxFileCount: 3,   //最多文件数量

     maxFileSize: 1024*2,  //允许文件上传大小

     overwriteInitial: false,

     previewFileIcon: '<i class="fa fa-file"></i>',

     initialPreviewAsData: true, // defaults markup

     preferIconicPreview: true, // 是否优先显示图标  false 即优先显示图片

     previewFileIconSettings: { // configure your icon file extensions

         'doc': '<i class="fa fa-file-word-o text-primary"></i>',

         'docx': '<i class="fa fa-file-word-o text-primary"></i>',

         'xls': '<i class="fa fa-file-excel-o text-success"></i>',

         'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',

         'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',

         'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',

         'zip': '<i class="fa fa-file-archive-o text-muted"></i>',

         'htm': '<i class="fa fa-file-code-o text-info"></i>',

         'txt': '<i class="fa fa-file-text-o text-info"></i>',

         'mov': '<i class="fa fa-file-movie-o text-warning"></i>',

         'mp3': '<i class="fa fa-file-audio-o text-warning"></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>'

     }

 });

上传的url就是点击Upload按钮调用的方法,我们没有使用这个url,我们是在提交之后再上传的,所以可以忽略上传

页面提交保存后台:

         [HttpPost]

         [ValidateInput(false)]

         [ValidateAntiForgeryToken]

         [UIExceptionResult]

         public ActionResult attachment_create(create model)

         {

             if (ModelState.IsValid)

             {

                     string uploadPath = Server.MapPath(string.Format("~\\upload\\{0}\\", DateTime.Now.ToString("yyyyMMdd")));

                     string savePath = string.Format("/upload/{0}/", DateTime.Now.ToString("yyyyMMdd"));

                     if (Directory.Exists(uploadPath) == false)

                     {

                         Directory.CreateDirectory(uploadPath);

                     }

                     if (model.attch != null && model.attch.Count() > )

                     {

                         for (int i = ; i < model.attch.Count(); i++)

                         {

                             var _file = model.attch[i];

                             string _imageName = DateTime.Now.Ticks.ToString() + System.IO.Path.GetExtension(_file.FileName);

                             var path = uploadPath + _imageName;

                             //保存

                             _file.SaveAs(path);

                         }

                     }

             return View(model);

         }