Html HTML5：如何指定文件输入的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13340747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5: How to specify the width of a file input?
提问by Brian
The W3C validator says: "Attribute size not allowed on element input at this point."
W3C 验证器说：“此时元素输入不允许属性大小。”
<input type="file" name="foo" size="40" />
What is the correct way to specify the width of a file input in HTML5?
在 HTML5 中指定文件输入宽度的正确方法是什么？
采纳答案by silppuri
In the input field use the style attribute, this allow you to use css.
在输入字段中使用 style 属性，这允许您使用 css。
<input type="file" name="foo" style="width: 40px" />
<input type="file" name="foo" style="width: 40px" />
Or with separate css:
或者使用单独的 css：
input[name="foo"] {
width: 40px;
}
回答by D.Alexander
In your css file, specify the width as such:
在您的 css 文件中，指定宽度如下：
input[type=file] { width: 300px; border: 2px solid red; }
回答by Epsil0neR
<form class="upload-form">
<input class="upload-file" data-max-size="2048" type="file" >
<input type=submit>
</form>
<script>
$(function(){
var fileInput = $('.upload-file');
var maxSize = fileInput.data('max-size');
$('.upload-form').submit(function(e){
if(fileInput.get(0).files.length){
var fileSize = fileInput.get(0).files[0].size; // in bytes
if(fileSize>maxSize){
alert('file size is more then' + maxSize + ' bytes');
return false;
}else{
alert('file size is correct- '+fileSize+' bytes');
}
}else{
alert('choose file, please');
return false;
}
});
});
</script>
