在使用JavaScript上传文件之前,有什么方法可以检查文件大小?
当前回答
尽管问题已经有了答案,我还是想把我的答案贴出来。可能对以后的观众有用。您可以像下面的代码中那样使用它。
document.getElementById("fileinput").addEventListener("change",function(evt) { //Retrieve the first (and only!) File from the FileList object var f = evt.target.files[0]; if (f) { var r = new FileReader(); r.onload = function(e) { var contents = e.target.result; alert("Got the file\n" + "name: " + f.name + "\n" + "type: " + f.type + "\n" + "size: " + f.size + " bytes\n" + "starts with: " + contents.substr(1, contents.indexOf("\n")) ); if (f.size > 5242880) { alert('File size Greater then 5MiB!'); } } r.readAsText(f); } else { alert("Failed to load file"); } }) <input type="file" id="fileinput" />
其他回答
我偶然遇到了这个问题,我需要的一行代码隐藏在大块的代码中。
简单回答:this.files[0].size
顺便说一下,不需要JQuery。
尽管问题已经有了答案,我还是想把我的答案贴出来。可能对以后的观众有用。您可以像下面的代码中那样使用它。
document.getElementById("fileinput").addEventListener("change",function(evt) { //Retrieve the first (and only!) File from the FileList object var f = evt.target.files[0]; if (f) { var r = new FileReader(); r.onload = function(e) { var contents = e.target.result; alert("Got the file\n" + "name: " + f.name + "\n" + "type: " + f.type + "\n" + "size: " + f.size + " bytes\n" + "starts with: " + contents.substr(1, contents.indexOf("\n")) ); if (f.size > 5242880) { alert('File size Greater then 5MiB!'); } } r.readAsText(f); } else { alert("Failed to load file"); } }) <input type="file" id="fileinput" />
否是,在较新的浏览器中使用File API。详见TJ的回答。
如果你也需要支持旧的浏览器,你将不得不使用基于flash的上传器,如SWFUpload或Uploadify来做到这一点。
SWFUpload Features Demo展示了file_size_limit设置是如何工作的。
注意,这(显然)需要Flash,加上它的工作方式与正常的上传表单有点不同。
适用于动态和静态文件元素
仅Javascript解决方案
函数validateSize(input) { const fileSize = input.files[0]。Size / 1024 / 1024;// in MiB if (fileSize > 2) { alert('文件大小超过2个MiB'); / / $(文件).val (");//使用Jquery清除 }其他{ //继续 } } <input onchange="validateSize(this)" type="file">
你可以试试这个fineuploader
它在IE6(及以上版本)、Chrome或Firefox下运行良好