Putting input file into FormData jquery to submit to PHP

Question

I know already got question for this problem but i still cant did it properly. Need some help.

I need to upload a file with additional data with it.

my input.php:

<input type="file"  id="foto_path" name="foto_path"  />
<input type="button" value="Add" onclick="javascript:sendForm()" />

I send that with javascript :

function sendForm() {
    var fileInput = document.querySelector('#foto_path');
    var oMyForm = new FormData();
    var nip=123223374;//it will be generated by php, for temporary i just hardcode it
    oMyForm.append("foto_path", fileInput);
    oMyForm.append("nip",nip );
    var oReq = new XMLHttpRequest();
    oReq.open("POST", "upload-file.php", true);
    oReq.onload = function(oEvent) {
        if (oReq.status == 200) {
          //oOutput.innerHTML = "Uploaded!";
          alert('success');
        } else {
          //oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
          alert('failed');
        }
      };
    oReq.send(oMyForm);
}

and when I send that to upload-file.php:

logapp("post -> ".print_r($_POST,true));//logapp is just function to log to file
logapp("files -> ".print_r($_FILES,true));

I got this from log:

09/07/2013 02:47:06 pm :: post -> Array
(
    [foto_path] => [object HTMLImageElement]
    [nip] => 123223374
)

09/07/2013 02:47:06 pm :: files -> Array
(

)

I got success alert but I need to get files for foto_path as $_FILES not $_POST. My Question is why input files detected as $_POST["foto_path"] not as $_FILES["foto_path"]. How to change that to $_FILES["foto_path"] so I can start work with the files uploaded?

Check this question [Upload File With Ajax XmlHttpRequest][1] [1]: stackoverflow.com/questions/6211145/… — maketest
– maketest, Commented Jul 9, 2013 at 8:19
i still got [object HTMLImageElement] in $_POST how to change that to files? — Daniel Robertus
– Daniel Robertus, Commented Jul 9, 2013 at 8:32
Note that formData() is not supported in IE <= 9. However, it seems to be no matter nowadays. — Chemical Programmer
– Chemical Programmer, Commented Mar 15, 2016 at 11:37

Daniel Robertus · Accepted Answer · 2013-07-09 09:35:26Z

5

update : i solved this problem at last

var ft=$('#foto_path_upload')[0].files[0];
oMyForm.append("foto_path_upload", ft);

and this i got this from log :

09/07/2013 04:26:53 pm :: files -> Array
(
    [foto_path_upload] => Array
        (
           [name] => noimages.jpg
           [type] => image/jpeg
           [tmp_name] => D:\xampp\tmp\php4E90.tmp
           [error] => 0
           [size] => 3642
         )

 )

Problem solved. thanx everyone

answered Jul 9, 2013 at 9:35

Daniel Robertus

1,1021 gold badge11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arjit Over a year ago

why we have used [0] to access file upload element - '$('#foto_path_upload')[0]'

Daniel Robertus Over a year ago

Sorry i forgot why i using [0]. Maybe because i have many element with id "foto_path_upload" so it need to be spesific which one i want to access... just try without it..

themightysapien Over a year ago

@Arjit may be a late reply but he is using [0] to make it a dom object from jquery object you can directly do var file = document.getElementById("foto_path_upload").files[0] ;)

Collectives™ on Stack Overflow

Putting input file into FormData jquery to submit to PHP

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related