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/