200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > input type=file / 美化自定义上传按钮

input type=file / 美化自定义上传按钮

时间:2020-11-03 03:39:14

相关推荐

input type=file / 美化自定义上传按钮

上传的按钮实在是太丑了,今天看了别人的文章,自己找了找资料,琢磨了一下,结果如下。

图片如下:

代码如下,粘贴即可以用:

@{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;width: 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;width: 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" οnchange="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("上传成功!");}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。