【问题标题】：Javascript upload file sizeJavascript上传文件大小
【发布时间】：2017-07-05 23:11:14
【问题描述】：

我需要有关上传文件大小的帮助。我想添加文件最大大小为 2MB。

我使用 javascript 代码，但我不擅长 javascript，所以如果你们可以在我的代码中添加文件大小。谢谢。

var _validFileExtensions = [".jpg", ".jpeg", ".png"];    
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                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("Sorry,   " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                }
            }
        }
    }
  
    return true;
}

【问题讨论】：

文件的客户端验证是一个非常糟糕的主意
@TonyRaoulIscaros 你能分享一个上传文件的好代码吗？
你的服务器端框架/编程语言是什么？
@TonyRaoulIscaros 我通常使用 php 但上传文件我想使用 javascript
stackoverflow.com/questions/23980733/…

标签： javascript file upload size

【解决方案1】：

这是我最终编写的代码

它仍然可以通过各种方式进行优化，因此它对任何性能、语义或重构编辑都是开放的。我不是专家。

代码解释

在var _maxFilsize 中，您必须写入允许的最大文件大小（以字节为单位）。
Function Validate 有参数oForm，它需要一个HTML object，通过它可以搜索输入字段。
将所有input 元素存储在一个数组arrInputs 中。
将arrInputs[i].type 的值以string 形式存储在变量inputType 中
将inputType 的值与if/else 语句中的不同输入类型进行比较。
满足条件时，每个块 returns 和 function 验证匹配的输入字段
函数validateImage 接受一个参数，该参数只是输入字段的属性，其中包含用户选择的文件列表arrInputs[i].files。
在validateImage 函数中有一个for 循环，它遍历文件列表并验证它们的type 和size，并根据文件的有效性返回true 或false。

代码

var _maxFilesize = 2000000;// in bytes
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    var inputType;
    var i = 0;
    var arrLength = arrInputs.length;
    for (i; i < arrLength; i++) {
        inputType =arrInputs[i].type.toString();
        if (inputType === "file"){
            return validateImage(arrInputs[i].files);//calls function for validating image
        }else if(inputType === "email"){
            //call email validating function
        }//add validation for more fields
    }
}
function validateImage(file){
    var j = 0;
    var NumberOfFiles = file.length;
    for(j; j< NumberOfFiles;j++){
        if ((file[j].type === "image/jpeg" || file[j].type === "image/png")&& (file[j].size)<= _maxFilesize){
            return true //or whatever you want to do here like calling a function to upadate view, or something
        }
        else{
            return false //or whatever you want to do here like calling a function to upadate view, or something
        }
    }
}

【讨论】：