javascript ajax upload system check condition

Question

I was following a tutorial about how to make an javascript/ajax upload system with progress (%) indicator . I have successfully added a css progress bar indicator to it . But i have a problem that i can't solve is how to put to condition of upload like: type, file size, file is set, .... here is my code (upload.php)

<?php
foreach($_FILES['file']['name'] as $key => $name){
        if ($_FILES['file']['error'][$key] == 0 && move_uploaded_file($_FILES['file']['tmp_name'][$key], "files/{$name}")){
            $uploaded[] = $name;
        }
    }
    if(!empty($_POST['ajax'])){
        die(json_encode($uploaded));
    }
?>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="upload.js"></script>
</head>
<body>
        <div id="uploaded">
            <?php

            if (!empty($uploaded)){
                foreach ($uploaded as $name){
                    echo '<div><a href="files/',$name,'">',$name,'</a></div>';
                }
            }

            ?>
             </div>
<div id="upload_progress"></div>
        <div>
            <form action="" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="file[]" />
<input type="submit" id="submit" value="upload" />
</form>

and this is the javascript file (upload.js):

var handleUpload = function(event){
    event.preventDefault();
    event.stopPropagation();

    var fileInput = document.getElementById('file');

    var data = new FormData();

    data.append('ajax', true);
    for (var i = 0; i < fileInput.files.length; ++i){
        data.append('file[]', fileInput.files[i]);
    }   

    var request = new XMLHttpRequest();

    request.upload.addEventListener('progress', function(event){
        if(event.lengthComputable){
            var percent = event.loaded / event.total;
            var progress = document.getElementById('upload_progress');

            while (progress.hasChildNodes()){
                progress.removeChild(progress.firstChild);
            }
            progress.appendChild(document.createTextNode(Math.round(percent * 100) +' %'));
            document.getElementById("loading-progress-17").style.width= Math.round(percent * 100) +'%';
        }
    });
    request.upload.addEventListener('load', function(event){
        document.getElementById('upload_progress').style.display = 'none';
    });
    request.upload.addEventListener('error', function(event){
        alert('Upload failed');
    });
    request.addEventListener('readystatechange', function(event){
        if (this.readyState == 4){
            if(this.status == 200){
                var links = document.getElementById('uploaded');
                var uploaded = eval(this.response);
                var div, a;
                for (var i = 0; i < uploaded.length; ++i){
                    div = document.createElement('div');
                    a = document.createElement('a');
                    a.setAttribute('href', 'files/' + uploaded[i]);
                    a.appendChild(document.createTextNode(uploaded[i]));
                    div.appendChild(a);
                    links.appendChild(div);
                }
            }else{
                console.log('server replied with HTTP status ' + this.status);
            }
        }
    });
    request.open('POST', 'upload.php');
    request.setRequestHeader('Cache-Control', 'no-cache');
    document.getElementById('upload_progress').style.display = 'block';
    request.send(data);

}

window.addEventListener('load', function(event){

    var submit = document.getElementById('submit');
    submit.addEventListener('click', handleUpload);
});

I just need and example of how to check file size is less than 50MB and i can do the other checks my self i just don't know how to check condition in this upload system. Thanks in advance

Maybe this could be helpful http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation — intelis, Sep 14 '13 at 02:49
@intelis thanks bro it's useful but i just don't know how to apply it on my code . I always get my code destroyed — user2687618, Sep 14 '13 at 02:56

score 1 · Answer 1 · answered Sep 14 '13 at 05:00

1

If you want to check something like the size, you can realize it with your code easily:

Take a look at these lines in your code:

for (var i = 0; i < fileInput.files.length; ++i){
    data.append('file[]', fileInput.files[i]);
}

This is where the files are added to the FormData which is then submitted to the server. You can add the conditions here, e.g. a size check:

for (var i = 0; i < fileInput.files.length; ++i){
    //file.size is given in bytes
    if(fileInput.files[i].size <= MAX_FILESIZE_IN_BYTES){
        data.append('file[]', fileInput.files[i]);
    }
}

I hope this helps.

answered Sep 14 '13 at 05:00

potato25

186
5

your idea looks right but when i tried it it's not work and the upload system still upload any file size . I think this part of code is for uploading multiple files. Take a look at the php first part the loop and the move_uploaded_files . Do you think condition can be putted there? – user2687618 Sep 14 '13 at 09:51
Ummm... Are you sure that the files bigger than the given size, lets say 50 MB, are actually uploaded? What did you insert for the max file size? Note that this simple check will not give any warnings. – potato25 Sep 14 '13 at 18:48

javascript ajax upload system check condition

1 Answers1