2

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.

Alex
  • 61
  • 3
  • 9
  • Sure its `$_POST` and not `$_FILES`? – Xorifelse May 20 '17 at 15:10
  • Also, [a good read](http://stackoverflow.com/documentation/php/2781/security/29134/uploading-files) on how to securely upload files in PHP. – Xorifelse May 20 '17 at 15:11
  • 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 May 20 '17 at 15:30
  • And where is your html form? And `formData.append("files", files);` what is `files`? where is it defined? – Xorifelse May 20 '17 at 15:39
  • This is my JS script for drag and drop https://pastebin.com/968w0SiU with HTML https://pastebin.com/01P02xEv – Alex May 20 '17 at 15:43
  • Functions like dragEnter() or dragLeave() its not important, because this function adding only CSS style. – Alex May 20 '17 at 15:44
  • It all seems alright, except the part where `files` could be undefined when you're using it. Check it perhaps with console.log(files) before appending it to formdata. Secondly, it should be `$_FILES` and not `$_POST`, just verified. Also I noticed you append `` in your js code. Don't, id's should be unique in a page. – Xorifelse May 20 '17 at 15:53
  • files is not empty, it can be $_FILES, but both is empty and id is unique – Alex May 20 '17 at 16:48

2 Answers2

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.

Community
  • 1
  • 1
J.C.
  • 144
  • 1
  • 5
  • 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 May 20 '17 at 16:44
  • Today I try to fix the code and its work, thank you very much. – Alex May 21 '17 at 14:21
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.

pokeybit
  • 1,032
  • 11
  • 18