上传的按钮实在是太丑了,今天看了别人的文章,自己找了找资料,琢磨了一下,结果如下。
图片如下:
代码如下,粘贴即可以用:
@{ ViewBag.Title = "IndexInput"; Layout = ""; } <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>input file 美化</title> <style> * { margin: 0; padding: 0; } .btn_addPic { display: block; position: relative; 120px; height: 28px; overflow: hidden; border: 1px solid #EBEBEB; background: none repeat scroll 0 0 #F3F3F3; color: #999999; cursor: pointer; text-align: center; float: left; margin-right:5px; } .btn_addPic span { cursor: pointer; display: block; line-height: 28px; } .filePrew { cursor: pointer; position: absolute; top: 0; left:0; 120px; height: 30px; font-size: 100px; /* 增大不同浏览器的可点击区域 */ opacity: 0; /* 实现的关键点 */ filter: alpha(opacity=0); /* 兼容IE */ } </style> </head> <body> <form action="@Url.Action("IndexInput", "Uploader")" method="post" enctype="multipart/form-data" > <div style="height: 28px;margin:100px;"> <div class="btn_addPic"> <span>上传图片…</span><input tabindex="3" title="支持jpg、jpeg、gif、png格式,文件小于5M" size="3" name="pic" class="filePrew" type="file" onchange="document.getElementById('textName').value=this.value"> </div> <input type="text" id="textName" style="height: 28px;border:1px solid #f1f1f1" /> </div> <br /> <br /> <input type="submit" /> </form> </body> </html>
cs 代码 如下:
[HttpPost] public ActionResult IndexInput(int? page) { HttpPostedFileBase saaa = Request.Files["upfile"]; HttpPostedFileBase baseFile = Request.Files[0]; string qqfile = Path.GetFileName(baseFile.FileName); Stream stream = baseFile.InputStream; using (var flieStream = new FileStream(HttpContext.Server.MapPath(@"\ImageNew\") + qqfile, FileMode.Create)) { stream.CopyTo(flieStream); } return Content("上传成功!"); }