Ajax sending FormData without webkitboundary

Question

I just want to send the raw plain text in a Ajax call without additional header stuff like:

------WebKitFormBoundarycwwJjby5xTdrlr48
Content-Disposition: form-data; name="upload"; filename="any"
Content-Type: ....

Ajax call:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: '/handle_restful_call',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

Update: I am not using php on server side. Back to topic is it possible to only send the raw data??

For uploading a json plain text file. When sending a front end JavaScript Object with Ajax there is no webkitboundary. When I use the FormData they are added. — frank schmidt, Sep 25 '15 at 19:15
What's the *real* problem here? PHP should be able to handle `WebKitFormBoundary` just fine. Your file will be in `$_FILES['upload']`. — gen_Eric, Sep 25 '15 at 19:17
You may not be able to do this with jQuery, but you should be able to with raw `XMLHttpRequest` calls. — gen_Eric, Sep 25 '15 at 19:29
I am not using php. My mistake.. Anyway is it possible to just send plain text? — frank schmidt, Sep 25 '15 at 19:29

score 2 · Accepted Answer · answered Sep 25 '15 at 19:34

XHR 2 supports file uploads. I don't think you can do this with jQuery, but you can do it with native XMLHttpRequest.

var file = input.files[0];

var xhr = new XMLHttpRequest;
xhr.open('POST', '/handle_restful_call');

xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('X-File-Name', file.name);
xhr.setRequestHeader('Content-Type', file.type||'application/octet-stream');

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        var response = xhr.responseText;
    }
};

xhr.send(file);

score 0 · Answer 2 · answered Sep 25 '15 at 19:19

0

Use serialize(): Give your form an id:

<form id="myForm" method "POST">
...your fields here
</form>

Javascript:

var datastring = $("#myForm").serialize();  
$.ajax({
    type: 'POST',
    url: 'http://example.com/script.php',
    data: datastring
}).done(function(response){
    var response = $.trim(response); //the response -if any- from php
});

In ajax file, you can parse all the form fields using the $_POST. For example:

<?php
$username = $_POST["username"]; //etc...
?>

If you want to pass a text file to ajax, create a textarea and dump the contents of the file there. Then pass it over to ajax... I don't know what you actually want to do, but hope this helps you...

answered Sep 25 '15 at 19:19

Theo Orphanos

1,417
1
19
27

My mistake, I thought you just wanted the text-content of the file... However, have a look at this: http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously/8758614#8758614 That might help you – Theo Orphanos Sep 25 '15 at 19:23
I am using this method, but I do not want to send the webkitboundary as mentioned. – frank schmidt Sep 25 '15 at 19:32
In that case, dump the text contents of the file in (for example) textarea, send it to ajax as part of the form data, and in the ajax file you can re-create the text file and fill it up with the (textarea) contents using: php file_put_contents()... Wouldn't that work for you? – Theo Orphanos Sep 25 '15 at 19:41

score 0 · Answer 3 · answered Feb 18 '17 at 00:46

0

I've gotten around it by not using the new FormData constructor at all and passing the file directly as the body

Something like fetch(url, { body: input.files[0], method: ..., headers: ... }

answered Feb 18 '17 at 00:46

tryangul

1,246
1
8
8

Aominé · Answer 4 · 2017-03-18T16:43:29.983

you can get the input file content with :

var obj=document.getElementById("inputfile");
upload(obj.files[0]);

the Upload function :

function upload(file){

        var fd = new FormData();
        fd.append("file", file);
        var xhr = new XMLHttpRequest();

        xhr.open('POST', 'upload.php', true);
        xhr.send(fd);

    }

here is the PHP file

$destination = 'test/';

if (isset($_FILES["file"]["name"])) {

    $name = $_FILES["file"]["name"];
    $tmp_name = $_FILES['file']['tmp_name'];
    $error = $_FILES['file']['error'];

    //echo $name;
    //echo $tmp_name;
    //echo $error;

    move_uploaded_file($_FILES['file']['tmp_name'], $destination.$name);

}

//////////////////////////////////////////////////////////////////////////

xhr POST has no size limit, but PHP has a size limit ^^

you can change the maximum data that you can send to PHP with the variable "post_max_size", in the php.ini file

//////////////////////////////////////////////////////////////////////////

Ajax sending FormData without webkitboundary

4 Answers4