css - 需要使用 html 5 在图像中添加上传按钮

标签 css ajax html

Upload Button : 给我建议使用 html5 和 css 和 1.7 在图像中添加上传按钮 对于低于 Java 1.6 的图像,我需要在该 (+) 图像的一 Angular 添加上传按钮。

  <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="../css/stylejava.css">
    </head>
    <body>
        <h1>Welcome to Java</h1>
        <div class="imagewrap">
            <button type="submit" class="button" value="Button">
                <img src="../images/symbol1.png" alt="Submit"
                    style="width: 50px; height: 50px">
            </button>
            <img src="../images/java166.jpg" alt="Mountain View"
                style="width: 200px; height: 200px">
        </div>
        <div class="imagewrap">
            <button type="submit" class="button1" value="Button 1">
                <img src="../images/symbol.png" alt="Submit"
                    style="width: 50px; height: 50px">
            </button>
            <img src="../images/java177.jpg" alt="Mountain Viewm"
                style="width: 200px; height: 200px">
        </div>

    </body>
    </html>

这是我的html5代码

最佳答案

你可以使用label标签来实现你想要的。

这是一个例子:http://jsfiddle.net/tvtespeq/

HTML:

<input type="file" id="img-upload">
<label id="img-label" for="img-upload"></label>

CSS:

#img-label {
    width: 100px;
    height: 100px;    
    display: block;    
    background: url("http://placehold.it/100x100");

    cursor: pointer;    
}

#img-upload {
    display: none;
}

关于css - 需要使用 html 5 在图像中添加上传按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29690379/

相关文章:

html - Selenium 测试以验证样式属性中的 css 属性

javascript - 我想要 .fadeout 每个 div 期望 .this

html - @media 屏幕无法处理 "height"值

html - 空白问题

html - 数据表:所有列的最大大小

javascript - 通过Angular js ajax将div的id值发送到php变量

javascript - jQuery 点击只发生一次

javascript - 均匀间隔的响应式瓷砖网格 - 纯 css 有可能吗?

html - 将垂直滚动从页面移动到内部 div

php - 将 PHP 变量动态传递给 AJAX JavaScript 函数