设置输入类型="文件"按钮的样式

这是一个工作示例(使用额外的JS来处理dragover事件和删除文件).

https://jsfiddle.net/ms3bbazv/4/

希望这有帮助!

您可以将输入类型="文件"包装在输入的标签内.根据您的喜好设置标签样式,并使用display:none隐藏输入;

使用jquery很简单.通过略微修改给出Ryan建议的代码示例.

基本的HTML:

准备就绪时,请务必在输入上设置样式:opacity: 0 您无法设置,display: none因为它需要可点击.但是如果你愿意的话,你可以将它放在"新"按钮下面,或者用z-index收集其他东西.

单击图像时,设置一些jquery以单击实际输入.

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

现在你的按钮正常工作.只需在更改时剪切并粘贴值即可.

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

哇哇!您可能需要将val()解析为更有意义的内容,但您应该全部设置.

这是一个解决方案,它没有真正设置元素的样式,而是在其他元素(可以设置样式)的顶部使用元素.该元素是不是真的可见的,因此,总的错觉是一个很好的样式文件上传控制.

我最近遇到了这个问题,尽管Stack Overflow上有很多答案,但似乎没有一个真的符合这个要求.最后,我最终定制了这个,以便有一个简单而优雅的解决方案.

我也在Firefox,IE(11,10和9),Chrome和Opera,iPad以及一些Android设备上进行了测试.

这是JSFiddle链接 - > http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});

body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}

    

        
        
        Select file..
    
    

    upload_file
    

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}

Upload

Upload File

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}

 Customized input of type file 


        
        Attach file