Why the change in input type=file is not identified with `form.serialzie()`

Question

I am checking whether the values in form has been changed before submitting for updation. All other controls inside form, if changed, are identified but not input type=file control. Below is the sample I was trying and if you try submitting form with or without uploading file, the response is its not changed. Why this behavior with only input type=file? Why the change in input type=file is not identified?

var form_serialize = "";
$(function() {
  form_serialize = $("#frmProfile").serialize();
})

$('.submit').on('click', function(e) {
  e.preventDefault();
  var isChanged = $("#frmProfile").serialize() == form_serialize ? false : true;
  if (isChanged)
    $('body').append('changed');
  else
    $('body').append('Not changed');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frmProfile">
  <input type="file" />
  <input type="submit" class="submit" value="Submit" />
</form>

As per the documentation of [serialize()](https://api.jquery.com/serialize/) : `Data from file select elements is not serialized.` — Pranav C Balan, Feb 06 '16 at 09:42
You can use ajaxForm submission plugin on here : http://malsup.com/jquery/form/ , which may help you — Pranav C Balan, Feb 06 '16 at 09:51
Oh.. Ok.. Thank you.. Could you please post it as answer? @PranavCBalan.. — Guruprasad J Rao, Feb 06 '16 at 09:55

score 2 · Accepted Answer · edited May 23 '17 at 12:15

2

As per the documentation of serialize()

Data from file select elements is not serialized.

Instead you can use jQuery ajaxForm plugin which support.

Or you can use FormData object , Refer these questions : Jquery/Ajax Form Submission (enctype="multipart/form-data" ). Why does 'contentType:False' cause undefined index in PHP? , Sending multipart/formdata with jQuery.ajax

edited May 23 '17 at 12:15

Community

1
1

answered Feb 06 '16 at 09:57

Pranav C Balan

113,687
23
165
188

Why the change in input type=file is not identified with `form.serialzie()`

1 Answers1