http://jsfiddle.net/5WcFj/

我有一个输入字段,其类型为“文件”。

     <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浏览器中都尝试过

最佳答案

<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" />


JS

$('.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/

10-05 20:31
查看更多