<input type="file" />，美化自定义上传按钮-蒲公英云

<input type="file" />，美化自定义上传按钮

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

图片如下：

       ![05171134-2246e6d94558456cbb8f463ab8beca4b.png][]

代码如下，粘贴即可以用：

@{
    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("上传成功！");
        }