file is not uploading in jquery AJAX

Question

index.html is:

<form id="fileupload" method="POST" action="UploadHandler.php" enctype="multipart/form-data">           
<input type="file" id="files" name="files[]" multiple="multiple" title='Click to add Files'>
<input type="hidden" id="fileCnt" name="fileCnt" value="">
<input type="submit" name="btnAdd" id="btnAdd" class="buttonsub" value="Upload Files">
</form>
<script>
$('#fileupload').submit(function(e){
//window.location='assays.php';
var target = 'windowFormTarget';
window.open('', target, 'width=500,height=300');
this.setAttribute('target', target);
});
</script>

UploadHandler.php:

<html>
<head>
</head>
<body>
<table>
<th>Name</th>
<th>Size(in bytes)</th>
<th>Status</th>
<?php
for($i=0;$i<$_POST['fileCnt'];$i++)
{
echo '<tr>';
echo '<td>'.$_FILES['files']['name'][$i].'</td>';
echo '<td>'.$_FILES['files']['size'][$i].'</td>';
if($_FILES['files']['error'][$i] == 0)
{
    //print"<pre>";print_r($_FILES);die;
    //echo '<br/>'.$new_file_name = $_FILES['files']['name'][$i];
    //move_uploaded_file($_FILES['files']['tmp_name'][$i], 'uploads/'.$new_file_name);die;
    ?>
    <input type="hidden" name="name-<?php echo $i;?>" id="name-<?php echo $i;?>" value="<?php echo trim($_FILES['files']['name'][$i]);?>"/>
    <input type="hidden" name="tmp_name-<?php echo $i;?>" id="tmp_name-<?php echo $i;?>" value="<?php echo trim($_FILES['files']['tmp_name'][$i]);?>"/>
    <td>
        <div class="progress" id="done-<?php echo $i;?>">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:100%">
            Done
            </div>
        </div>      
        <div class="progress" id="wait-<?php echo $i;?>">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:100%">
            Uploading..
            </div>
        </div>
    </td>
</tr>
<?php }
}
?>
</table>
<script>
$(document).ready(function() {
var fileCnt = <?php echo $_POST['fileCnt']; ?>;
var j=0;
var files =<?php echo json_encode($_FILES);?>;
function doAjax(j,fileCnt) {
$("#wait-"+j).show();
$("#done-"+j).hide();
var name = $('#name-'+j).val();
var tmp_name = $('#tmp_name-'+j).val();
alert("#done-"+j);
$.ajax({
       type: "POST",
       url: "postdata.php",        
       data: {                  
                'files':files,
                'id':j,
                'form_action': 'uploadFileData'
             },
        enctype:'multipart/form-data',
        success: function($succ){
                alert("result-"+$succ);
                if($succ == 1){
                $("#wait-"+j).hide();
                $("#done-"+j).show();                   
                }
                j++;
                if (j < fileCnt) {
                    doAjax(j,fileCnt);
                }
            }
    }); 
}
doAjax(j,fileCnt);
});
</script>
</body>
</html>

And my postdata.php is:

if(isset($_POST) && !empty($_POST))
        {
            $new_file_name = trim($_POST['files']['files']['name'][$_POST['id']]);
            $tmp_name = trim($_POST['files']['files']['tmp_name'][$_POST['id']]);
            if(move_uploaded_file($tmp_name, 'uploads/'.$new_file_name))
            {
                echo "1";die;
            }else{
                echo "0";die;
            }
        }

UploadHandler.php opens up in a new window when user submits a form on index.html. And on load event of uploadhandler.php, ajax request for multiple files in a loop sends out for uploading the files to a directory. Now the problem is that files are not uploading and i a not able to debug the problem.

Please help.

What I can see from you code, you submit the files to a second script that prints out some input-fields containing the files names (and tmp-names) and then tries to submit those to the server. If that is your intention: this will not work. The javascript may have access to name and tmp-name, but not to the files (which are on the server). What are you trying to accomplish in general? — Marten Koetsier, Aug 21 '15 at 08:49
Exactly I am trying to do the same. Yes i am doing all this to show the progress bars on second script until the file is not uploaded to the server — D.k, Aug 21 '15 at 09:00

score 1 · Accepted Answer · edited May 23 '17 at 12:15

From what you are doing: I'm sorry, but that can never work.

As said, the javascript in UploadHandler.php may have access to the file names (and even tmp-names) but not to the actual file.

The UploadHandler.php script receives the files (in $_FILES). That is, the server software puts the uploaded files into some temporary directory with some random filename (this filename is in $_FILES['files']['tmp_name'][$i]). The script can handle the file. An important thing to do, is to move the file. The script starts writing the html-output and sends it to the browser. Then, the script is finished and the server will make sure that everyting is cleaned up. That means: the uploaded files are deleted! (That's why you should move them, to prevent that).

For a good understanding of how file upload works, it may be good to read up again on the matter at this php manual page. The section on 'POST method uploads' actually explains things quite well.

If you really want a progress bar, it is advisable to make use of some external library. This question and answers on SO will probably get you up to speed.

Also note that file upload via ajax is not very well supported yet, see also this answer on SO.

score 0 · Answer 2 · answered Aug 21 '15 at 08:13

0

Well, well, well. Small mistake. Isn't it $_FILES instead of $_POST["files"]? You need to change these lines:

$new_file_name = trim($_POST['files']['files']['name'][$_POST['id']]);
$tmp_name = trim($_POST['files']['files']['tmp_name'][$_POST['id']]);

Change them to:

$new_file_name = trim($_FILES['files'][$_POST['id']]['name']);
$tmp_name = trim($_FILES['files'][$_POST['id']]['files']['tmp_name']);

Also, the [$_POST['id']] should come before ["name"] and ["tmp_name"].

answered Aug 21 '15 at 08:13

Praveen Kumar Purushothaman

164,888
24
203
252

But my $_FILES[] array is empty. No data received in it on postdata.php – D.k Aug 21 '15 at 08:18
@D.k The only way PHP can access file system is through `$_FILES`. No other way PHP can access. And you haven't provided your JavaScript code that sends the file to the server yet. It should be an AJAX call. – Praveen Kumar Purushothaman Aug 21 '15 at 08:20
ajax call is in UploadHandler.php. Please scroll it down – D.k Aug 21 '15 at 08:47
@D.k It would be great if you could format the question. – Praveen Kumar Purushothaman Aug 21 '15 at 08:49

file is not uploading in jquery AJAX

2 Answers2