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
– Deepak Biswal, Commented Sep 26, 2016 at 11:28
Yeah, I get it afterwards :) I already made it to work, so everything is OK now. — Patrik Krehák
– Patrik Krehák, Commented Sep 26, 2016 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
– Mouradif, Commented Sep 26, 2016 at 11:44

Mohit Tanwani · Accepted Answer · 2016-09-26 11:56:49Z

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, 2016 at 11:56

answered Sep 26, 2016 at 11:21

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

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

4 Comments

Mohit Tanwani Over a year ago

Can you upvote the answer that will encourage other people to use this solution ?

Patrik Krehák Over a year ago

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.

Mohit Tanwani Over a year ago

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.

Patrik Krehák Over a year ago

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.

Mouradif · Accepted Answer · 2016-09-26 11:43:14Z

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;
    }
  });
})

Collectives™ on Stack Overflow

Get content of FormData with data set from form element

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related