HTML5：如何指定文件输入的宽度？答案

【问题标题】：HTML5: How to specify the width of a file input?HTML5：如何指定文件输入的宽度？
【发布时间】：2012-11-12 08:58:46
【问题描述】：

W3C 验证器说：“此时元素输入上不允许使用属性大小。”

<input type="file" name="foo" size="40" />

在 HTML5 中指定文件输入宽度的正确方法是什么？

【问题讨论】：

stackoverflow.com/questions/4909228/style-input-type-file

标签： css html

【解决方案1】：

在输入字段中使用 style 属性，这允许您使用 css。

<input type="file" name="foo" style="width: 40px" />

或者使用单独的 css：

input[name="foo"] {
  width: 40px;
}

【讨论】：

Firefox 忽略了“width”属性。这是我尝试的第一件事。
啊当然。那么我认为你应该支持宽度属性和跨浏览器兼容性的大小。或尝试@Sirko 发布的链接中建议的解决方法。
如果您想出解决问题的方法，请告诉我 :)

【解决方案2】：

在您的 css 文件中，指定宽度：

input[type=file] { width: 300px; border: 2px solid red; }

http://jsfiddle.net/VbTAV/

【讨论】：

我在 Firefox 上，在你的例子中，它实际上是控制宽度的“大小”属性（即使它是不允许的），而不是“宽度”属性。我尝试将您示例中的“宽度”更改为 200 或 400，但没有效果。
是的。 size 属性似乎是目前处理 Firefox 的方式。

【解决方案3】：

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

http://jsfiddle.net/9bhcB/2/

【讨论】：