效果图:
代码如下:
引用:js,css
bootstrap-fileupload.min.js
bootstrap-fileupload.min.css
FileSize.js
附件下载请点击这里
View里的代码:
<div class="row">@using (Html.BeginForm("Create", "RotatePic", FormMethod.Post, new { id = "formid", enctype = "multipart/form-data" })){@Html.AntiForgeryToken()<div class="form-horizontal" style="margin-top:20px"><div class="form-group"><label class="col-md-2 col-sm-2 control-label">轮播图</label><div class="col-md-3 col-sm-4"><div class="fileupload fileupload-new" data-provides="fileupload"><div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">![](http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image)</div><div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div><div><span class="btn btn-default btn-file"><span class="fileupload-new"><i class="fa fa-paper-clip"></i> Select image</span><span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span><input name="file" id="file" type="file" accept=".png,.jpg" class="default" /></span><a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> Remove</a></div></div></div></div><div class="form-group"><div class="col-md-offset-2 col-lg-10"><input type="submit" value="保存" class="btn btn-primary" onclick="Check()" /><input type="button" class="btn btn-default" onclick="window.history.go(-1)" value="返回" /></div></div></div>}
</div>@section scripts{<script src="~/js/FileSize.js"></script>
}
Controller里的代码:
[HttpPost][ValidateAntiForgeryToken]public ActionResult Create(RotatePic rotatePic, HttpPostedFileBase file){if (ModelState.IsValid){//轮播图if (file != null && file.FileName != ""){if (System.IO.Path.GetExtension(file.FileName).ToLower() == ".jpg" || System.IO.Path.GetExtension(file.FileName).ToLower() == ".png"){rotatePic.BannerPic = Updatefile(file);}else{ViewBag.msg = "<script>alert('正面上传的图片格式不正确!')</script>";return View();}}if (rotatePic != null){rotatePic.CreateTime = DateTime.Now;db.RotatePic.Add(rotatePic);db.SaveChanges();}return RedirectToAction("Index");}return View();}
//图片处理,直接复制代码public string Updatefile(HttpPostedFileBase file){string path = "";if (file != null){var fileName = Path.Combine(Request.MapPath("~/Upload"), Path.GetFileName(file.FileName));string ext = System.IO.Path.GetExtension(file.FileName);if (!Directory.Exists(fileName)){string n = Guid.NewGuid().ToString();string newname = n + ext;fileName = Path.Combine(Request.MapPath("~/Upload"), Path.GetFileName(newname));if (ext.ToLower() == ".jpg"){Common.ImageHelper.CompressionJpgImage(file.InputStream, fileName);}else{Common.ImageHelper.CompressionPngImage(file.InputStream, fileName);}path = "../Upload/" + Path.GetFileName(newname);}else{if (ext.ToLower() == ".jpg"){Common.ImageHelper.CompressionJpgImage(file.InputStream, fileName);}else{Common.ImageHelper.CompressionPngImage(file.InputStream, fileName);}path = "../Upload/" + Path.GetFileName(file.FileName);}}return path;}