否是，在较新的浏览器中使用File API。详见TJ的回答。

如果你也需要支持旧的浏览器，你将不得不使用基于flash的上传器，如SWFUpload或Uploadify来做到这一点。

SWFUpload Features Demo展示了file_size_limit设置是如何工作的。

注意，这(显然)需要Flash，加上它的工作方式与正常的上传表单有点不同。

尽管问题已经有了答案，我还是想把我的答案贴出来。可能对以后的观众有用。您可以像下面的代码中那样使用它。

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。

适用于动态和静态文件元素

仅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">

是的，您可以为此使用文件API。

这是一个完整的例子(见评论):

document.getElementById("btnLoad").addEventListener("click", function showFileSize() { // (Can't use `typeof FileReader === "function"` because apparently it // comes back as "object" on some browsers. So just see if it's there // at all.) if (!window.FileReader) { // This is VERY unlikely, browser support is near-universal console.log("The file API isn't supported on this browser yet."); return; } var input = document.getElementById('fileinput'); if (!input.files) { // This is VERY unlikely, browser support is near-universal console.error("This browser doesn't seem to support the `files` property of file inputs."); } else if (!input.files[0]) { addPara("Please select a file before clicking 'Load'"); } else { var file = input.files[0]; addPara("File " + file.name + " is " + file.size + " bytes in size"); } }); function addPara(text) { var p = document.createElement("p"); p.textContent = text; document.body.appendChild(p); } body { font-family: sans-serif; } <form action='#' onsubmit="return false;"> <input type='file' id='fileinput'> <input type='button' id='btnLoad' value='Load'> </form>

Slightly off-topic, but: Note that client-side validation is no substitute for server-side validation. Client-side validation is purely to make it possible to provide a nicer user experience. For instance, if you don't allow uploading a file more than 5MB, you could use client-side validation to check that the file the user has chosen isn't more than 5MB in size and give them a nice friendly message if it is (so they don't spend all that time uploading only to get the result thrown away at the server), but you must also enforce that limit at the server, as all client-side limits (and other validations) can be circumvented.

使用jquery:

$(" #图像文件”)。On ('change'， function() { console.log('This file size is: ' + This .files[0]. log)size / 1024 / 1024 + "MiB"); })； < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js " > < /脚本> <form action="upload" enctype="multipart/form-data" method="post"> 上传图片: <input id="image-file" type="file" name="file" /> <input type="submit" value="Upload" /> > < /形式