javascript - 如何使用 Safari 移动设备检测输入文件中被忽略的大文件

Question

Safari 移动版 <input type="file">忽略传入的大文件(当前使用 a 10mb image file 进行测试)。

当它这样做时，输入不会触发任何事件(没有变化，没有错误，什么都没有)。它只是忽略用户操作。

有没有办法检测这种情况何时发生以通知我们的用户？

此处测试用例:http://jsbin.com/hugeja/8/edit

---

编辑:因为这真的看起来像Safari 但是，我在 Safari bug 跟踪器上打开了问题#16862230(我会留下一个链接，但没有...哦苹果...)如果您可以重现，请对此问题发表评论!

Answer 1

我在 iFadey 上找到了一篇关于计算上传文件大小的文章:http://www.ifadey.com/2012/05/get-file-size-from-input-control/

这是 JavaScript:

document.addEventListener( 'DOMContentLoaded', function() {
    var inputImg = document.getElementById( 'inputImg' );

    inputImg.addEventListener( 'change', function( e ) {
        var fileSize = getFileSize( inputImg );

        if( fileSize > -1 ) {
            document.getElementById( 'fileSize' ).innerHTML = ( fileSize / 1024 ).toFixed( 2 ) + ' KB';
}
        else
            document.getElementById( 'fileSize' ).innerHTML = 'Failed to get file size';
    }, false );
}, false );

function getFileSize( inputFile ) {
    var files = inputFile.files;

    if( !files ) {
        //for IE
        try {
            var fs = new ActiveXObject( 'Scripting.FileSystemObject' );
            var file = fs.getFile( inputFile.value );
            return file.size;
        } catch( ex ) {
            return -1;
        }

    } else if( files.length > 0 ) {
        //for rest of the world
        return files[ 0 ].size;
    }
}

当然，您只需要代码的 files.length > 0 部分，因为您的目标是 Safari(不是 IE)，但我还是发布了整个代码。添加此脚本后，我可以在我的 iPhone Safari 上上传一个 13 MB 的视频。它被自动压缩，但脚本仍然返回实际文件大小。

看看这里:http://jsbin.com/kubodoqe/3/edit

尝试一下，如果有效请告诉我。

编辑:如果要将上传文件的最大大小设置为 10 MB，请将此添加到代码中:

    if(fileSize > 10485760) {
alert("Your file is too large to be uploaded");
inputImg.value = "";
document.getElementById( 'fileSize' ).innerHTML = "";
}

更新后的 JS Bin:http://jsbin.com/kubodoqe/5/edit