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("上传成功!");
            }
    
  • 相关阅读:
    acdream 1738 世风日下的哗啦啦族I 分块
    hihocoder #1179 : 永恒游戏 暴力
    hihocoder #1178 : 计数 暴力
    hihocoder #1177 : 顺子 模拟
    刷了500道水题是什么体验?
    scu 4436: Easy Math 水题
    JVM系列三:JVM参数设置、分析
    Eclipse插件Target Management (RSE)
    修改jsp文件tomcat发布失败(Could not delete May be locked by another process)
    oracle中修改表名
  • 原文地址:https://www.cnblogs.com/Kummy/p/3115103.html
Copyright © 2011-2022 走看看