在使用JavaScript上传文件之前,有什么方法可以检查文件大小?
当前回答
否是,在较新的浏览器中使用File API。详见TJ的回答。
如果你也需要支持旧的浏览器,你将不得不使用基于flash的上传器,如SWFUpload或Uploadify来做到这一点。
SWFUpload Features Demo展示了file_size_limit设置是如何工作的。
注意,这(显然)需要Flash,加上它的工作方式与正常的上传表单有点不同。
其他回答
否是,在较新的浏览器中使用File API。详见TJ的回答。
如果你也需要支持旧的浏览器,你将不得不使用基于flash的上传器,如SWFUpload或Uploadify来做到这一点。
SWFUpload Features Demo展示了file_size_limit设置是如何工作的。
注意,这(显然)需要Flash,加上它的工作方式与正常的上传表单有点不同。
是的,您可以为此使用文件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.
这很简单。
const oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>
if (oFile.size > 2097152) // 2 MiB for bytes.
{
alert("File size must under 2MiB!");
return;
}
如果你将Ie的“文档模式”设置为“标准”,你可以使用简单的javascript“大小”方法来获取上传文件的大小。
将Ie的文档模式设置为标准模式:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
然后,使用'size' javascript方法获取上传文件的大小:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>
这对我很管用。
适用于动态和静态文件元素
仅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">
推荐文章
- 如何删除和清除所有的本地存储数据
- 如何从给定的html字符串中删除前导和尾随空白?
- 如何为KnockoutJS调试模板绑定错误?
- 将一个二进制的NodeJS Buffer转换为JavaScript的ArrayBuffer
- 检测浏览器标签是否有焦点
- JavaScript在数组中
- 如何从JavaScript中使用正则表达式的字符串中剥离所有标点符号?
- 如何修改标签文本?
- 如何获得十六进制颜色值而不是RGB值?
- 字符串strip() JavaScript?
- 如何将一个标题转换为jQuery的URL段塞?
- 获取对象的第一个索引
- 我如何用javascript编程点击链接?
- c#消毒文件名
- JavaScript:客户端验证与服务器端验证