Get content of FormData with data set from form element

Question

I have formData from <form> element and I want to get content of elements inside form, but with formData. As you can see, I'm not using formData.append(). Also, please, do not post answers with form.find('input').val(), because it doesn't answer my problem. I will use that formData in the ajax, that's why I am here.

Simple example:

$(function() {
    var form = $('#test');

    form.on('submit', function(e) {
        e.preventDefault();
        var formData = new FormData(form[0]);
        console.log(formData.get('file'));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="test">
  <input type="file" name="file" accept="image/*">
  <input type="submit">
</form>

What is the issue? What is `console.log()` showing for you! I can see file info at my end! — Deepak Biswal, Sep 26 '16 at 11:28
Hope [this](http://stackoverflow.com/questions/34712929/formdata-has-is-not-a-function) will help you! — Deepak Biswal, Sep 26 '16 at 11:33
Yeah, I get it afterwards :) I already made it to work, so everything is OK now. — Patrik Krehák, Sep 26 '16 at 11:36
hi @debute, I've been in a lot of trouble sending file data through AJAX, and found my way through native JS APIs. check my answer, I'm sure it'll help too. — Mouradif, Sep 26 '16 at 11:44
Actually, my own uploader is working great, but I had problem: files selected from input (it was hidden) worked good to send, but files dropped on the div (not directly on the input), then it was problem to make it works. But I managed it to work with `var files = e.originalEvent.dataTransfer.files;input[0].files = files;` and then proceed with classic upload and it works. I just wanted to check, why there was "no file" when dropped on the `div` — Patrik Krehák, Sep 26 '16 at 11:56

Mohit Tanwani · Accepted Answer · 2016-09-26T11:56:49.773

1

You can do it by using id of an element.

console.log($('#image').get(0).files[0]);

<input type="file" name="file" accept="image/*" id="image">

Multiple files can be appended by using each

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

//Program a custom submit function for the form
$("form#test").submit(function(event){
  //disable the default form submission
  event.preventDefault();
  //Other data
  console.log($(this).serialize());
  //File data
  console.log($('#image').get(0).files);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="test" method="post">
  <input type="text" name="firstname">
  <input type="text" name="lastname">
  <input type="file" name="file" id="image">
  <input type="submit">
</form>

edited Sep 26 '16 at 11:56

answered Sep 26 '16 at 11:21

Mohit Tanwani

6,608
2
14
32

Can you upvote the answer that will encourage other people to use this solution ? – Mohit Tanwani Sep 26 '16 at 13:46
yea, sure, anyway my solution was not that one, it was something else (wrong file proceed after dropping on the dopzone), but this one lead me to the right solution. – Patrik Krehák Sep 27 '16 at 20:39
Ohh I see, please post your all the question detail when you ask a question that will understand people to what's the issue, BTW, atleast my solution shows you way, All the best. – Mohit Tanwani Sep 28 '16 at 03:11
Yea I know, but code is little a robust, actually it is a plugin. I didn't expect that the problem would be there, because preview image worked in both situations. – Patrik Krehák Sep 28 '16 at 06:50

score 0 · Answer 2 · answered Sep 26 '16 at 11:43

If you want to send the file Data to your server via AJAX, you should take a look at the native HTML5 FileReader API.

Here's a little JSFiddle with an example by getting the Base64 String for a file. I hope this helps.

HTML :

<form method="post" enctype="multipart/form-data" id="test">
  <input type="file" name="file" accept="image/*"><br />
  <select name="format">
    <option value="0">Binary String</option>
    <option value="1" selected>DataURL (Base64)</option>
    <option value="2">Text</option>
  </select><br />
  <input type="submit">
</form>

<textarea id="fileData" cols="100" rows="20"></textarea>

JavaScript:

$(function(){
  var form = $('#test');

  form.on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(form[0]);
    var reader = new FileReader();
    var format = formData.get('format');
    var file = formData.get('file');
    switch (format) {
      case "0":
        reader.readAsBinaryString(file);
        break;
      case "1":
        reader.readAsDataURL(file);
        break;
      case "2":
        reader.readAsText(file);
        break;
      default:
        reader.readAsDataURL(file);
        break;
    }
    reader.onloadend = function(e){
      document.getElementById("fileData").innerHTML = e.target.result;
    }
  });
})

Get content of FormData with data set from form element

2 Answers2