新增用户资料,需要用户上传多笔附件,所以就尝试用了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中调用该控件:
1 var url = rootUrl + "attachment/upload"; 2 $("#attach").fileinput({ 3 theme: "explorer", //主题 4 language: 'zh', 5 uploadUrl: url,// 上传请求路径 6 allowedFileExtensions : ["pdf", "doc","docx"],//允许上传的文件后缀 7 showUpload: false,//是否显示上传按钮 8 showCaption: false,//是否显示容器 9 dropZoneEnabled: false,//是否显示拖拽区域 10 removeFromPreviewOnError: true,//是否移除校验文件失败的文件 11 layoutTemplates: { 12 actionUpload: '', //取消上传按钮 13 actionZoom: '' //取消放大镜按钮 14 }, 15 showPreview: true, //显示预览 16 minFileCount: 1, //最低文件数量 17 //maxFileCount: 3, //最多文件数量 18 maxFileSize: 1024*2, //允许文件上传大小 19 overwriteInitial: false, 20 previewFileIcon: '<i class="fa fa-file"></i>', 21 initialPreviewAsData: true, // defaults markup 22 preferIconicPreview: true, // 是否优先显示图标 false 即优先显示图片 23 previewFileIconSettings: { // configure your icon file extensions 24 'doc': '<i class="fa fa-file-word-o text-primary"></i>', 25 'docx': '<i class="fa fa-file-word-o text-primary"></i>', 26 'xls': '<i class="fa fa-file-excel-o text-success"></i>', 27 'xlsx': '<i class="fa fa-file-excel-o text-success"></i>', 28 'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>', 29 'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>', 30 'zip': '<i class="fa fa-file-archive-o text-muted"></i>', 31 'htm': '<i class="fa fa-file-code-o text-info"></i>', 32 'txt': '<i class="fa fa-file-text-o text-info"></i>', 33 'mov': '<i class="fa fa-file-movie-o text-warning"></i>', 34 'mp3': '<i class="fa fa-file-audio-o text-warning"></i>', 35 'jpg': '<i class="fa fa-file-photo-o text-danger"></i>', 36 'gif': '<i class="fa fa-file-photo-o text-muted"></i>', 37 'png': '<i class="fa fa-file-photo-o text-primary"></i>' 38 } 39 });
上传的url就是点击Upload按钮调用的方法,我们没有使用这个url,我们是在提交之后再上传的,所以可以忽略上传
页面提交保存后台:
1 [HttpPost] 2 [ValidateInput(false)] 3 [ValidateAntiForgeryToken] 4 [UIExceptionResult] 5 public ActionResult attachment_create(create model) 6 { 7 if (ModelState.IsValid) 8 { 9 10 string uploadPath = Server.MapPath(string.Format("~\\upload\\{0}\\", DateTime.Now.ToString("yyyyMMdd"))); 11 string savePath = string.Format("/upload/{0}/", DateTime.Now.ToString("yyyyMMdd")); 12 if (Directory.Exists(uploadPath) == false) 13 { 14 Directory.CreateDirectory(uploadPath); 15 } 16 if (model.attch != null && model.attch.Count() > 0) 17 { 18 for (int i = 0; i < model.attch.Count(); i++) 19 { 20 var _file = model.attch[i]; 21 string _imageName = DateTime.Now.Ticks.ToString() + System.IO.Path.GetExtension(_file.FileName); 22 var path = uploadPath + _imageName; 23 //保存 24 _file.SaveAs(path); 25 } 26 27 } 28 return View(model); 29 }