Passing data not accessable in php from ajax

Question

I have sending data from ajax

Html element is given here

<input type="file" name="expansionfile" class="expansionfile" style="width:354px; margin:1px;" />

jQuery(document).ready(function(e) {
                        jQuery(".progress").hide();
                        jQuery('.expansionfile').on('change',prepareUpload);        
                    });

Ajax element is given here. I have get files for onchange event in jquery

function prepareUpload(event)
                    {
                        var file= event.target.files[0];
                        //var file = this.files[0];
                        jQuery(".progress").show();
                        var bar = jQuery('.bar');  
                        var percent = jQuery('.percent');

                        //var data = new FormData();
                        //data.append('file',file);
                        //var data= {"file":file};
                        formData = new FormData();
                        formData.append('file', event.target[0].files[0]);
                        var data = formData;
                        //data = JSON.parse(data);



                        jQuery.ajax({
                            url: '../wp-content/plugins/download-monitor/admin/extensionfile.php',
                            type: 'POST',
                            data:data,
                            cache: false,
                            enctype: 'multipart/form-data',
                            //dataType: 'json',
                            processData: false,
                            contentType: false,
                            success: function(data, textStatus, jqXHR)
                            {
                                    console.log('success');
                            },
                            error:function(jqXHR, textStatus, errorThrown){
                                console.log(errorThrown);
                            },
                            complete:function(){
                            },
                             xhrFields: {
                              onprogress: function (progress, position, total, percentComplete) {
                                var percentage = Math.floor((progress.total / progress.totalSize) * 100);
                                var percentVal = percentage + '%';  
                                 bar.width(percentVal)  
                                 percent.html(percentVal);
                                //console.log('progress', percentage);
                                if (percentage === 100) {
                                  //console.log('DONE!');
                                }
                              }
                            },
                            processData: false,
                            contentType: file.type
                        });
                    }

Here file is stored in file variable. I can see in console.

I have receiving data in php

$filename = $_POST['file'];
    var_dump($filename);

But it shows

Undefined index: file in C:\xampp\htdocs\apk2tpk\wp-content\plugins\download-monitor\admin\extensionfile.php

[This](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) might help. Does your form have the correct enctype attribute? — Alex, Jul 14 '14 at 08:41

Jonan · Accepted Answer · 2014-07-14T10:54:00.760

0

I tested it on my own machine, and I found out that you have to access the file from the form like this: e.target[0].files[0], and then in PHP you can access it like this: $_FILES['file']

formData = new FormData();
formData.append('file', event.target[0].files[0]);
var data = formData;
jQuery.ajax({
    url: '../wp-content/plugins/download-monitor/admin/extensionfile.php',
    type: 'POST',
    data: data,
    cache: false,
    processData: false,
    contentType: false,
    success: function(data){
        //do whatever you want
    }
});

edited Jul 14 '14 at 10:54

answered Jul 14 '14 at 08:38

Jonan

2,485
3
24
42

@MohaideenIsmail try putting brackets `()` around the curly brackets `{}` – Jonan Jul 14 '14 at 08:41
Still it gives undefined index – Mohaideen Ismail Jul 14 '14 at 08:43
@MohaideenIsmail do you get that error when you access the PHP page directly, or when you do the ajax request? – Jonan Jul 14 '14 at 08:44
@MohaideenIsmail edited my answer, it should work now – Jonan Jul 14 '14 at 09:59
Thank you for your effort. but i tried fromData already But it didn't give result. I think problem is from 1.php, 2. may be parsing. I have added header already. – Mohaideen Ismail Jul 14 '14 at 10:09
@MohaideenIsmail you can access the file via `$_FILES['file']` instead of `$_POST['file']` – Jonan Jul 14 '14 at 10:13
Yes, I tried that. But no result. I dont know what is the problem. – Mohaideen Ismail Jul 14 '14 at 10:16
@MohaideenIsmail hmmm strange, this should work... let me test it again on my machine – Jonan Jul 14 '14 at 10:16
@MohaideenIsmail are there any other input fields in your form? – Jonan Jul 14 '14 at 11:10
Thanks lot. I found my mistake. This is my mistake contentType: file.type – Mohaideen Ismail Jul 14 '14 at 11:16

Passing data not accessable in php from ajax

1 Answers1