如何在javascript中确定文件大小?

简短的回答,你不能

另外,查看Jguru How can you check the file size from JavaScript in a form with an input type of file?

你会发现一些要点

答案很简单,你不能。

原因:浏览器安全性不允许脚本 (javascript/vbscript)或甚至小程序和要读取的ActiveX控件 来自本地硬盘的文件。只有当您的代码 由某个证书颁发机构(CA)签名。现在输入类型 “文件”也没有读取文件的权限。我们做不到 关于这一切,因为HTML就是这么说的。既然不能 读取文件,它找不到输入文件的大小 标记已关联。由于找不到文件大小,因此没有 函数由javascript/vbscript公开以返回文件大小。但是 如果需要查找文件大小,可以说是为了限制文件大小 上载到Web服务器的文件。那么你可以通过 一旦用户提交,在服务器端计算文件内容 发送到服务器。这是许多免费电子邮件提供商喜欢的 www.hotmail.com做。

如您所知,IE支持图像的文件大小属性。在其他浏览器中没有这样的运气…但是,您应该能够修改这个脚本:

http://natbat.net/2008/Aug/27/addSizes/

它使用JSON读取文件的HTTP头并显示其实际文件大小。这有助于防止人们上传大型动画赠品。

至于尺寸:

var img = new Image();
theImage.src = "someimage.jpg";
actualwidth = theImage.width;
actualheight = theImage.height;

当然,这是一种纯粹的客户端方法,用于处理最好的服务器端。

实际上,有了HTML5,这是可能的,
阅读更多信息 here .

服务器端验证总是一个更好的选择,但在您的情况下,我可以理解为什么您希望在客户端进行验证。

另外,似乎其他人误解了这个问题,丹尼尔想要测试的图片已经上传了,在这种情况下,有一个相当简单的方法可以这样做(前提是图片与脚本在同一个域中)。

var getFileSize = function(address, responseHandler) {
  var req = new XMLHttpRequest();  

  req.open('head', address, true);  
  req.onreadystatechange = responseHandler;
  req.send(null);  
}

var responseHandler = function(resp) {
  if ( this.readyState == 1 ) {
    this.abort();
  }
  console.log(this.getResponseHeader("Content-length"));
};

getFileSize("http://stackoverflow.com/content/img/so/logo.png", responseHandler);

繁荣。这个例子适用于ff3和2。既然您正在使用GreaseMonkey来实现这一点,那么浏览器兼容性似乎并不是一个问题。

我不确定GreaseMonkey是否共享相同的XML RPC域限制,但是如果您需要的图像文件与脚本位于不同的域中,那么您可能需要使用一些iframe魔力。

客户端验证不足以实现您的目标。一个简单的post请求将允许用户上传他们想要的任何图像,无论您为他们提供什么HTML或javascript。

您可以在HTML中设置文件上载位置的最大文件大小。

<input type="hidden" name="MAX_FILE_SIZE" value="10000000">

(最大文件大小(字节)。

但是,这是一些浏览器的“未记录/不支持”项。最好在服务器上传后检查文件大小。

您还可以使用Flash或Java applet来处理上传并检查其中的文件化。见 http://www.masrizal.com/product/custom%20tag/cf_flashmultiupload/docs%20&%20examples/example.cfm 和 http://www.saschawenning.de/labor/flash8/fileUpload/ 举个例子。

dom属性img.file size将返回引用的<img>的实际文件大小。可以使用jquery或dom“images”集合访问img对象。但是,这只是一个IE扩展。

另一种方法是省略<img>标记中的高度和宽度属性,以便下载完整图像,然后使用img.height和img.width确定下载图像的大小。这段代码可以作为中间步骤放在用户的配置文件编辑器页面中,从让某人以HTML格式输入其签名,然后向他们显示其签名的预览。笨重,我不得不承认,但可能。

如果您担心巨大的图像,请按照richy c.所述设置最大上载大小,但也要在服务器上调整上载图像的大小,并使用调整大小的版本。

Facebook对上传的大多数图片都这样做,以便提供合理尺寸的图片。甚至将它们转换为PNG格式(大多数?)案例,因为“质量下降”而使创意团队发疯。

您应该能够做的是图像URL的Ajax头请求,它只获取文件头而不是内容,所以速度要快得多。您将返回的头文件之一是内容长度,它将告诉您图像的大小(以字节为单位)。

更多 details here .

你可以做文件html5 js文件api

您可以在我的web ide中测试运行以下代码(但请使用Google Chrome或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.');
}