Sending FileList using Ajax to PHP script

Question

I'm trying to send array files using JS. My code:

var formData = new FormData();
formData.append("files", files);

$.ajax({
    url: './upload.php',
    method: 'post',
    data: formData,
    processData: false,
    contentType: false,
success: function(response) {
  alert('Files uploaded successfully. ');
  console.log(response);
},
error: function(jqXHR, textStatus, errorThrown) {
   console.log(textStatus, errorThrown);
}

});

In this image you can see the response(red) from php https://beta.ctrlv.cz/mUwx and also you can see the files array data. My php code is:

<?php
    echo $_POST['files'][0]["name"];
?>

I want use php script for upload, but the ajax didn't sent the array of file, which is important for uploading.

When I write print_r($_FILES), the output is empty: "Array ( )" so I don't know.. I will read it, but firstly, I need to have working upload, after I can secure it. — Alex
– Alex, Commented May 20, 2017 at 15:30
And where is your html form? And formData.append("files", files); what is files? where is it defined? — Xorifelse
– Xorifelse, Commented May 20, 2017 at 15:39
This is my JS script for drag and drop pastebin.com/968w0SiU with HTML pastebin.com/01P02xEv — Alex
– Alex, Commented May 20, 2017 at 15:43

Community · Accepted Answer · 2017-05-23 11:33:24Z

2

Here's an answer that I found:

var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

So now you have a FormData object, ready to be sent along with the XMLHttpRequest.

jQuery.ajax({
    url: 'php/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

Here the source: https://stackoverflow.com/a/5976031/7282094

Hope that help.

edited May 23, 2017 at 11:33

CommunityBot

11 silver badge

answered May 20, 2017 at 15:54

J.C.

1541 silver badge5 bronze badges

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

2 Comments

Alex Over a year ago

Uncaught TypeError: Cannot read property 'files' of undefined at uploadFiles (index.php?dir=u_tchosniper:342) at HTMLButtonElement.onclick (index.php?dir=u_tchosniper:238)

Alex Over a year ago

Today I try to fix the code and its work, thank you very much.

pokeybit · Accepted Answer · 2017-05-20 15:46:43Z

0

Change contentType: false, to contentType: "multipart/form-data", possibly.

Taken from http://api.jquery.com/jquery.ajax/

contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8') Type: Boolean or String When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass false to tell jQuery to not set any content type header. Note: The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding. Note: For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server.

answered May 20, 2017 at 15:46

pokeybit

1,03211 silver badges19 bronze badges

1 Comment

Alex Over a year ago

the result is of print_r($_POST) and $_FILES is "Array ( )".

Collectives™ on Stack Overflow

Sending FileList using Ajax to PHP script

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related