javascript - 显示多个上传文件的总大小

原文 标签 javascript php jquery html file-upload

我正在用php做一个上传函数,它工作得很好。
只是因为我的PHP ini文件中的最大大小是32 MB,所以我不能上传比它大的任何东西。我也没意见。
但是:
当添加到输入文件的所有文件的总大小超过32mb时,我想阻止上载。
我发现这个脚本在添加文件后提醒文件大小,这是一个开始:

$(function(){
    $('#file').change(function(){
        var file=this.files[0]
        alert(file.size||file.fileSize)
    })
})

但在测试时我发现它只返回一个文件的大小。
如何更改此代码以返回添加到输入字段的所有文件的大小?或者还有别的办法吗?
HTML格式:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial</title>

<link rel="stylesheet" type="text/css" href="css/tut.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/script.js"></script>
</head>

<body>

<form action="tutorial.php" method="POST" enctype="multipart/form-data">
    <!--<input type="file" name="myFile"><p>
    <input type="submit" value="Upload">
    <br/><br/>-->
    <input type="file" name="files[]" multiple="multiple" id="file"/><p>
    <input type="submit" value="Upload" id="submit" />
</form>

</div>

</body>
</html>

PHP代码:
$file_dest = "photos/orig/";
$thumb_dest = "photos/thumbs/";

if(!empty($_FILES['files']['name'][0])){

    $files = $_FILES['files'];

    $uploaded = array();
    $failed = array();

    $allowedExt = array('png', 'jpg', 'gif');

    foreach($files['name'] as $position => $file_name) {
        $file_tmp = $files['tmp_name'][$position];
        $file_size = $files['size'][$position];
        $file_error = $files['error'][$position];

        $file_ext = explode('.', $file_name);
        $file_ext = strtolower(end($file_ext));

        if(in_array($file_ext, $allowedExt)){

            if($file_error == 0){

                if($file_size <= 20000000){

                    $file_name_new = uniqid('', true)."_".$file_name;
                    $file_move = $file_dest.$file_name_new;

                    if(move_uploaded_file($file_tmp, $file_move)){
                        $uploaded[$position] = $file_dest;

                    }else{
                        $failed[$position] = "[{$file_name}] failed to upload.";
                    }

                }else{
                    $failed[$position] = "[{$file_name}] is too large.";
                }

            }else{
                $failed[$position] = "[P$file_name}] errored with code {$file_error}";
            }

        }else{
            $failed[$position] = "[{$file_name}] file extension '{$file_ext}' is not allowed.";
        }
    }

    if(!empty($uploaded)){
        print_r($uploaded);
    }

    if(!empty($failed)){
        print_r($failed);
    }
}else{
    echo "No files were added.";
}

旁注:代码还没有完成,我还需要添加安全措施。请忽略它的缺乏。

最佳答案

$(function(){
    $('#file').change(function(){
        var combinedSize = 0;
        for(var i=0;i<this.files.length;i++) {
            combinedSize += (this.files[i].size||this.files[i].fileSize);
        }
        alert(combinedSize);
    })
})

相关文章:

javascript - 如何将字体自动添加到样式表?

jquery - jquery从表列中获取所有值

javascript - CORS不再工作

php - 将用户限制到其个人资料页面

javascript - 使用AJAX提交两个值

javascript - SCRIPT5009:“ Page_ClientValidate”未定义

nginx - 关闭浏览器后停止执行PHP脚本

javascript - 值未正确校准

javascript - AngularJS,无法添加模块

javascript - 如何使用X-Ray和NodeJ从Viadeo获取数据