JavaScript文件上传大小验证

我使用了一个主要的Javascript函数，这个函数是我在Mozilla开发者网络站点https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications上找到的，还有一个使用AJAX的函数，并根据我的需要进行了修改。它接收到一个文档元素id，关于在我的html代码中我想写文件大小的地方。

<Javascript>

function updateSize(elementId) {
    var nBytes = 0,
    oFiles = document.getElementById(elementId).files,
    nFiles = oFiles.length;

    for (var nFileId = 0; nFileId < nFiles; nFileId++) {
        nBytes += oFiles[nFileId].size;
    }
    var sOutput = nBytes + " bytes";
    // optional code for multiples approximation
    for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
        sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
    }

    return sOutput;
}
</Javascript>

<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>

<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>

干杯

2013-07-26 18:22:28

我使用这个脚本来验证文件类型和大小

2022-01-15 13:32:01

JQuery在这个线程中提供的例子是非常过时的，谷歌没有任何帮助，所以这里是我的修订:

<script type="text/javascript">
  $('#image-file').on('change', function() {
    console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
  });
</script>

2017-08-10 17:48:38

使用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" /> > < /形式

2012-11-06 11:21:04

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

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

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.

2010-09-15 13:05:56

这很简单。

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;
}

2016-04-22 14:37:57

JavaScript文件上传大小验证

推荐文章

最新文章

标签