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() > 0)
                    {
                        for (int i = 0; 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);
        }