javascript - 通过javascript获取图像大小

Question

为什么您选择了两倍于未显示的二阶图像大小的图像？

我的完整代码：http: //jsfiddle.net/ayxZM/

<script type="text/javascript">
    function handleFiles(files) {
        for (var i = 0; i < files.length; i++)
        {
            alert(files[i].size + " Bytes");
        }
    }
</script>
<input type="file" onchange="handleFiles(this.files)">​

Answer 1

如果您选择相同的图像两次，则图像选择并没有真正改变，因此onchange不会触发处理程序。如果您选择不同的图像，则会显示其大小。

Answer 2

因为当你第二次点击同一张图片时，文件没有变化，所以onchange没有触发事件，所以handleFiles没有调用函数，所以没有显示大小。在这种情况下使用另一个事件。也许您可以重置handleFiles函数内的输入文件。这样，即使用户再次选择同一张图片，也会被视为新图片，因此onchange会触发该事件。

Answer 3

像这样重置您的字段。我测试了它。它完美地工作。

            <script type="text/javascript">

                function handleFiles(files) {
                    for (var i = 0; i < files.length; i++)
                    {
                       alert(files[i].size + ' Bytes' );
                       reset_field('handleFilesfield');
                }
                }

                function reset_field(id) {
                $('#'+id).html($('#'+id).html());
                }

            </script>
            ​&lt;form>
                <span id="handleFilesfield"><input type="file" onchange="handleFiles(this.files)"/></span>
            </form>

Answer 4

正如这里已经提到的：onchange当您选择相同的图像时不会触发（= 不要更改值 - 看到吗？这是有道理的）。但是，如果您想onchange每次都触发，您可以尝试在onmousedown事件中重置值。这样，价值就会保持提交并强制onchange触发。演示： http: //jsfiddle.net/LeZuse/ayxZM/27/
注意：如果您需要它与触摸兼容，您可能也想使用ontouchstart。