zoukankan      html  css  js  c++  java
  • <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;
                 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("上传成功!");
            }
    
  • 相关阅读:
    两个数组的交集
    左叶子之和
    下载安装python
    占位
    2020 软件工程实践 助教总结
    安装使用 QEMU-KVM 虚拟化环境(Arch Linux / Manjaro / CentOS / Ubuntu )
    #69. 新年的QAQ
    1097E. Egor and an RPG game(Dilworth定理)
    #553. 【UNR #4】己酸集合
    #2099. 「CQOI2015」标识设计(插头dp)
  • 原文地址:https://www.cnblogs.com/Kummy/p/3115103.html
Copyright © 2011-2022 走看看