HTML5：如何指定文件輸入的寬度？

Question

W3C 驗證器說：“此時元素輸入不允許屬性大小。”

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

在 HTML5 中指定文件輸入寬度的正確方法是什么？

Answer 1

在輸入字段中使用style屬性，這允許您使用css。

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

或者使用單獨的css：

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

Answer 2

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

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

http://jsfiddle.net/VbTAV/

Answer 3

您需要將“輸入”放在一個 div 中：

  <div style="width: 40%">
     <input class="d-flex justify-content-end align-items-center" style="background-color: yellow; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%" type="file" id="file"/>
  </div>

Answer 4

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