上传前检查文件大小

时间:2012-07-16 23:42:08

标签: php javascript file-upload image-uploading filesize

我正在使用我从这里获得的这个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 个答案:

答案 0 :(得分:48)

客户端上传取消

在现代浏览器上(FF&gt; = 3.6,Chrome&gt; = 19.0,Opera&gt; = 12.0,以及Safari上的bug),您可以使用HTML5 File API。当文件输入的值发生更改时,此API将允许您检查文件大小是否符合您的要求。当然,这个以及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的使用。我建议reading the manual on it。要知道它,以及其他任何客户端(包括javascript检查),都可以被篡改,所以你应该总是有服务器端(PHP)验证。

PHP验证

在服务器端,您应该验证文件是否在大小限制范围内(因为除了INI设置之外的所有内容都可能被篡改)。您可以使用$_FILES数组来查找上传大小。 (有关$_FILES内容的文档可在MAX_FILE_SIZE docs

下方找到

<强> upload.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
    }
}

答案 1 :(得分:10)

我创建了一个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();
}

答案 2 :(得分:-3)

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