如何使用 css 设置输入类型文件的样式答案

【问题标题】：How to style input type file using css如何使用 css 设置输入类型文件的样式
【发布时间】：2014-01-20 12:57:54
【问题描述】：

我有一个“文件”类型的输入字段。

     <input type="text" name="fake_section" class="fake_section"><button class="fake_section">Choose Photo</button>
     <input type="file" style="display:none;" name="file" id="file" value="Choose Photo" accept="image/png,image/jpeg" /> 
     <input type="submit" name="submit" value="Submit" />

我使用以下 css

input[type="file"] {
    width:50%;
    height:25px;
    border-radius:2px;
    display:inline-block;
    border:thin solid #ddd;   
}

我的输出如下所示

但实际上我想要这样的输出， 另一个问题是我只想选择“jpeg 和 png”图像文件，但这个输入字段接受所有文件类型。我在 Firefox 和 Chrome 浏览器中都尝试了这个

【问题讨论】：

标签： jquery html css

【解决方案1】：

<input type="text" name="fake_section" class="fake_section">
    <input type="button" class="fake_section" value="Choose Photo"/>
<input type="file" style="display:none;" name="file" id="file" value="Choose Photo" accept="image/png,image/jpeg" /> 
<input type="submit" name="submit" value="Submit" />

$('.fake_section').click(function(e){
    e.preventDefault();

    $('#file').trigger('click');    
});

$('#file').change(function(e){
    var filename = $(this).val();
    var ext = filename.split('.').pop().toLowerCase();

    if( $.inArray( ext, ['gif','jpg','jpeg'] ) == -1 ){
        alert('not valid!');
    }
    else{
        $('input[name="fake_section"]').val(filename);
    }
});

这样试试

http://jsfiddle.net/jogesh_pi/5WcFj/2/

【讨论】：

但是这里没有文件被选择到texbox？？
但是我有一个问题，我可以使用这种方式将文件从表单发布到模型
@Parvathiiii 是的，因为我只是隐藏文件类型，表单肯定会传递文件类型信息。
但在我的情况下，当点击选择照片时，直接进入提交按钮而不选择照片？！！
让我们continue this discussion in chat

【解决方案2】：

试试这个来验证文件

var ext = $('#file').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
   alert('invalid extension!');
}

【讨论】：

【解决方案3】：

要回答第二个问题，您可以使用input 上的accept 属性来选择哪些文件出现在打开的框中。

请参阅official W3C reference。

但是请注意，该页面建议您可以使用accept="image/png,image/jpeg" 选择 png 和 jpeg 文件，但这不适用于所有浏览器。实际上仅在 Chrome 中。所以最好输入accept="image/*"（适用于所有图像文件），这在大多数浏览器中都可以使用。

小提琴here。

您也遇到了提交按钮的问题，但这是因为<input type="button"> 与<button> 不同。一个不提交，另一个提交。
以下是供参考的快速列表。

<input type="submit"> 提交
<input type="button"> 不提交
<button type="submit"> 提交
<button type="button"> 不提交
<button> 提交

【讨论】：