1

I am creating a simple video uploader for an adults site and it works for small files but it doesn't for bigger files. I have not tested what the break line is but I know for sure it works for 5mb or so file and fails for 100mb+ files. In the server I have set the maximum upload size and maximum post size to 1000mb in the php5.ini. Can you spot anything wrong with the code or do you think this is a server problem? The site is being hosted in a linux godaddy server. Here is a link for testing:

http://munchmacouchi.com/upload_sample/upload.php

Here is the code in 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)+' %'));
        }
    });
    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);
});

and for upload.php:

    <?php 
if(!empty($_FILES['file'])){
    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));
    }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Upload Test</title>
        <h3>Upload Test</h3>
        <script type="text/javascript" src="upload.js"></script>
        <style type="text/css">
            #upload_progress {display:none;}
        </style>
    </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">
                <div> 
                    <input type="file" id="file" name="file[]" multiple="multiple"/>
                    <input type="submit" id="submit" value="Upload"/>
                </div>
            </form>
        </div>
    </body>
</html>
4

0 回答 0