效果图:
代码如下:
引用:js,css
<script src="~/Scripts/bootstrap-fileupload.min.js"></script>
<script src="~/js/FileSize.js"></script>
<link href="~/Content/bootstrap-fileupload.min.css" rel="stylesheet" />
附件下载请点击这里
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;
}
网友评论