如何在上传前验证文件大小?

时间:2011-08-22 11:31:28

标签: javascript file-upload

  

可能重复:
  How can you determine the file size in JavaScript?

GMail可以选择检查文件大小和警报,而不会让页面回发。

我如何自己实现此功能?

4 个答案:

答案 0 :(得分:5)

使用HTML5,您可以使用JavaScript在客户端实现此目的。这是jQuery,但它当然没有那么好用:http://jsfiddle.net/pimvdb/S4mEv/2/。请注意,它尚未在所有浏览器中提供。

$('#file').change(function() {
    alert(this.files[0].size + " bytes");
});

https://developer.mozilla.org/en/DOM/File

答案 1 :(得分:1)

你可以使用Uploadify,这是一个jQuery插件,它使用flash来检查文件大小,并具有其他简洁的功能。 http://www.uploadify.com/documentation/options/sizelimit/

答案 2 :(得分:1)

您可以执行该文件HTML5 JS File API

您可以在我的网络IDE中测试运行以下代码(但请使用谷歌浏览器或FF): http://codesocialist.com/#/?s=bN

以下代码为您检索文件类型和文件大小:)

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {

    // Great success! All the File APIs are supported.
    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // files is a FileList of File objects. List some properties.
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
          output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes </strong></li>');
        }

        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
    }

    // Bind Event Listener
    document.getElementById('files').addEventListener('change', handleFileSelect, false);

} else {
    alert('The File APIs are not fully supported in this browser.');
}

答案 3 :(得分:0)

Gmail使用Flash应用程序实现此目的。如果要检查文件大小,则需要在此类环境中执行此操作;仅使用JavaScript无法实现此目的。