No file being uploaded while uploading multiple files using AJAX

Question

I am trying to upload multiple files with only 1 AJAX request. But I am facing some problems and they are:

UPDATE

No file is being uploaded to the server
~~It seems to me that multiple AJAX requests are being made as AJAX is inside the for loop.~~

How to sort these problems?

HTML

<!--<form id="fileupload" method="POST" enctype="multipart/form-data">-->
    <input type="file" multiple name="uploadfile[]" id="uploadfile" />
<!--</form>-->

JS

$("#uploadfile").change(function(){
     //submit the form here  
    //$('#fileupload').submit();
    var files = $("#uploadfile")[0].files;
    for (var i = 0; i < files.length; i++){
        //alert(files[i].name);
        var data = files[i].name;
        $.ajax({
            type:'POST',
            url: 'mupld.php',
            data: data
        });
    }

//var files = $('#uploadfile').prop("files"); //files will be a FileList object.
//alert(files);
//var names = $.map(files, function(val) { return val.name; }); //names is an array of strings (file names)

});

PHP

<?php
if(isset($_FILES['uploadfile'])){

    $errors= array();

    foreach($_FILES['uploadfile']['tmp_name'] as $key => $tmp_name ){
        $file_name = $key.$_FILES['uploadfile']['name'][$key];
        $file_size =$_FILES['uploadfile']['size'][$key];
        $file_tmp =$_FILES['uploadfile']['tmp_name'][$key];
        $file_type=$_FILES['uploadfile']['type'][$key]; 
        if($file_size > 2097152){
            $errors[]='File size must be less than 2 MB';
        }       

        //$query="INSERT into upload_data (`USER_ID`,`FILE_NAME`,`FILE_SIZE`,`FILE_TYPE`) VALUES('$user_id','$file_name','$file_size','$file_type'); ";

        $desired_dir="storage";

        if(empty($errors)==true){
            if(is_dir($desired_dir)==false){
                mkdir("$desired_dir", 0700);        // Create directory if it does not exist
            }

            if(is_dir("$desired_dir/".$file_name)==false){
                move_uploaded_file($file_tmp,"$desired_dir/".$file_name);
            }
            else{                                   // rename the file if another one exist
                $new_dir="$desired_dir/".$file_name.time();
                 rename($file_tmp,$new_dir) ;               
            }
         //mysql_query($query);         
        }
        else{
                print_r($errors);
        }
    }
    if(empty($error)){
        echo "Success";
    }
}
?>

`js` at Question does not appear to upload `File` object, but `File.name` `var data = files[i].name;`? `` is not valid comment in `javascript`. — guest271314, Jun 19 '16 at 04:59

guest271314 · Accepted Answer · 2016-06-19T06:19:18.330

0

js at Question does not appear to upload File object, but File.name at var data = files[i].name; ?  is not valid comment in javascript

Try using FormData()

$("#uploadfile").change(function() {
    var files = $("#fileupload")[0];
        $.ajax({
            type:"POST",
            url: "mupld.php",
            data: new FormData(files),
            processData: false,
            contentType: false
        });
});

edited Jun 19 '16 at 06:19

answered Jun 19 '16 at 05:07

guest271314

1
15
104
177

And how should I process the data in PHP? Will it be the same like my PHP script? – Ayan Jun 19 '16 at 05:17
I changed my JS accordingly with my PHP script but still no files are being uploaded. – Ayan Jun 19 '16 at 05:22
@Ayan See http://stackoverflow.com/questions/19295746/how-to-upload-multiple-files-using-php-jquery-and-ajax – guest271314 Jun 19 '16 at 05:49
@Ayan Are you receiving any errors at `js` or `php`? – guest271314 Jun 19 '16 at 06:07
Have you un-commented `
` element?
– guest271314 Jun 19 '16 at 06:15
Yes I did and added the action attribute as url in ajax. – Ayan Jun 19 '16 at 06:16
@Ayan See updated post, `d` at `processData` should be uppercase – guest271314 Jun 19 '16 at 06:19
Yea I was doing with uppercase D only but with no use. You can see my the code here http://pastebin.com/hujcY02u – Ayan Jun 19 '16 at 06:21
@Ayan You can verify that the files are uploaded by checking last request at `Network` tab at `devtools` following selecting files https://jsfiddle.net/nu9674ds/ – guest271314 Jun 19 '16 at 06:23
In the network tab it shows method as POST, file as mupld.php and domain as localhost, type as html, transfer as 0.00KB. Yet no files are being saved on the server. – Ayan Jun 19 '16 at 06:28
I think the filesize is creating a problem because all file uploads below 1mb are being uploaded whereas I have set in my php script to allow file uploads below 2mb. How to change the upload limit? – Ayan Jun 19 '16 at 06:50
@Ayan Try removing `click()`. Just tried using `php` at Question at http://stackoverflow.com/questions/19295746/how-to-upload-multiple-files-using-php-jquery-and-ajax, and all files were uploaded – guest271314 Jun 19 '16 at 06:50
_"How to change the upload limit?"_ Increase the file size limit? – guest271314 Jun 19 '16 at 06:51
Yes something like that so that users can upload any sized files. – Ayan Jun 19 '16 at 06:52
@Ayan Remove `if($file_size > 2097152){ $errors[]='File size must be less than 2 MB'; }` at `php` – guest271314 Jun 19 '16 at 06:54
I tried but still only files below 2 mb are being uploaded. – Ayan Jun 19 '16 at 06:56
See http://stackoverflow.com/questions/2184513/php-change-the-maximum-upload-file-size , http://pastebin.com/7e0MessM – guest271314 Jun 19 '16 at 06:59

score 0 · Answer 2 · answered Jun 19 '16 at 05:40

0

Use it

AJAX File Upload plugin

<pre>
    $("#uploadfile").change(function(){ 
    $.ajaxFileUpload
    (
        {
            url:'mupld.php',
            secureuri:false,
            fileElementId:'uploadfile[]',
            dataType: 'html',
            data:{},
            success: function (data, status)
            {

            },
            error: function (data, status, e)
            {

            }
        }
    );
    });
</pre>

answered Jun 19 '16 at 05:40

Максим Степанов

192
1
1
12

Can I later on add a radial progress bar with it? – Ayan Jun 19 '16 at 05:42
https://github.com/davgothic/AjaxFileUpload/blob/master/demos/advanced.html – Максим Степанов Jun 19 '16 at 20:58

No file being uploaded while uploading multiple files using AJAX

2 Answers2