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

妖狐艹你老母 2022-01-05 14:41 340阅读 0赞

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

图片如下：

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

转载于:https://www.cnblogs.com/Kummy/archive/2013/06/03/3115103.html

[05171134-2246e6d94558456cbb8f463ab8beca4b.png]: /images/20211228/99b53a10cef94737bf587a818e640b6f.png