上传前检查文件大小

IT技术 php javascript file-upload image-uploading filesize
2021-01-22 14:30:43

我正在使用我从这里获得的这个 javascript，它非常适合我需要的东西。

var _validFileExtensions = [".jpg", ".jpeg"]; 

function File_Validator(theForm){
    var arrInputs = theForm.getElementsByTagName("input"); 
    for (var i = 0; i < arrInputs.length; i++) { 
    var oInput = arrInputs[i]; 
    if (oInput.type == "file") { 
        var sFileName = oInput.value; 
        var blnValid = false; 
            for (var j = 0; j < _validFileExtensions.length; j++) { 
                var sCurExtension = _validFileExtensions[j]; 
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) { 
                    blnValid = true; 
                    break; 
                    } 
                } 

                if (!blnValid) { 
                    alert("Invalid image file type!"); 
                    return false; 
                } 
        } 
    } 

return true; 
}

现在，我想知道我是否可以检查文件大小并在文件大于 500kb 时失败 -> 在按下提交/上传按钮之前全部？

编辑

在查看了 PHPMyCoder 的建议后，我最终使用以下 javascript 代码解决了问题：

<script language='JavaScript'>
function checkFileSize(inputFile) {
var max =  3 * 512 * 512; // 786MB

if (inputFile.files && inputFile.files[0].size > max) {
    alert("File too large."); // Do your thing to handle the error.
    inputFile.value = null; // Clear the field.
   }
}
</script>

这会检查文件大小，并在提交表单之前提醒用户。

3个回答

客户端上传取消

在现代浏览器（FF >= 3.6、Chrome >= 19.0、Opera >= 12.0 和 Safari 上的 buggy）上，您可以使用HTML5 File API。当文件输入的值发生变化时，此 API 将允许您检查文件大小是否在您的要求范围内。当然， this 以及MAX_FILE_SIZE可以被篡改，因此请始终使用服务器端验证。

<form method="post" enctype="multipart/form-data" action="upload.php">
    <input type="file" name="file" id="file" />
    <input type="submit" name="submit" value="Submit" />
</form>

<script>
document.forms[0].addEventListener('submit', function( evt ) {
    var file = document.getElementById('file').files[0];

    if(file && file.size < 10485760) { // 10 MB (this size is in bytes)
        //Submit form        
    } else {
        //Prevent default and display error
        evt.preventDefault();
    }
}, false);
</script>

服务器端上传取消

在服务器端，不可能阻止从 PHP 发生的上传，因为一旦调用 PHP，上传就已经完成。如果您想节省带宽，您可以使用 ini 设置拒绝从服务器端上传upload_max_filesize。问题在于这适用于所有上传，因此您必须选择适用于所有上传的自由内容。的使用MAX_FILE_SIZE已在其他答案中讨论过。我建议阅读它的手册。请知道它以及其他任何客户端（包括 javascript 检查）都可以被篡改，因此您应该始终进行服务器端 (PHP) 验证。

PHP验证

在服务器端，您应该验证文件是否在大小限制范围内（因为到目前为止，除了 INI 设置之外的所有内容都可能被篡改）。您可以使用该$_FILES数组来找出上传大小。（有关内容的文档$_FILES可以在MAX_FILE_SIZE文档下方找到）

上传.php

<?php
if(isset($_FILES['file'])) {
    if($_FILES['file']['size'] > 10485760) { //10 MB (size is also in bytes)
        // File too big
    } else {
        // File within size restrictions
    }
}
"if($_FILES['file']['size'] > 10485760) {" 我已经在使用它了，它可以工作，如果文件大于 500kb，则永远不会上传，但我想在提交表单之前发出警报。
2021-03-25 14:30:43
由于您提到的原因，编辑 php.ini upload_max_filesize 并没有完全起作用，不幸的是它适用于所有文件上传。我尝试了 html5 文件 api，但它仍然通过提交操作
2021-04-02 14:30:43
这个$_FILES['file']['size']支票安全吗？黑客不能更改标题（包括['size']）吗？
2021-04-06 14:30:43
@cchap您是否阅读了我回答的“客户端取消”下的文字？该位将允许您在用户提交表单之前提醒他/她。
2021-04-12 14:30:43

我创建了一个 jQuery 版本的 PhpMyCoder 的答案：

$('form').submit(function( e ) {    
    if(!($('#file')[0].files[0].size < 10485760 && get_extension($('#file').val()) == 'jpg')) { // 10 MB (this size is in bytes)
        //Prevent default and display error
        alert("File is wrong type or over 10Mb in size!");
        e.preventDefault();
    }
});

function get_extension(filename) {
    return filename.split('.').pop().toLowerCase();
}
get_extension 函数也可以写成 return filename.split('.').pop().toLowerCase();
2021-03-23 14:30:43

在浏览器中运行的 JavaScript 通常无法访问本地文件系统。那是在沙箱之外。所以我认为答案是否定的。

这并不完全正确：一旦用户在输入中选择了特定文件，HTML5 API 就增加了使用 javascript 读取特定文件的可能性。
2021-03-25 14:30:43
其它你可能感兴趣的问题
上一篇如何使用 javascript 调用 ASP.NET c# 方法 下一篇JavaScript 中的微秒计时