使用javascript和jquery从表单的输入文件中上传文件数据

Question

I have a from with input of type file I need to get the file data from this form without refreshing the page I'm try to use this function

function submitForm(form){
  var url = $(form).attr("action");
  var formData = {};
  $(form).find("input[name]").each(function (index, node) {
     formData[node.name] = node.value;
  });
  $.post(url, formData).done(function (data) {
     alert(data);
  }); 
}

but this function get the values of form inputs, but I need to get all file data (tmp_name, file_name, file_type ...)
so can any one help me in this please
thanks in advance

Answer 1

Maybe you can reference your input of type file by id and then get the files property to obtain information about the files. Then you can loop through the files and for example read the name , size and type attribute of the File object.

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications https://developer.mozilla.org/en-US/docs/Web/API/File

For example

 $("#theForm").submit(function(e) { submitForm(this); e.preventDefault(); }); function submitForm(form) { var url = $(form).attr("action"); var formData = {}; formData.filesInfo = []; var files = $('#inputFile').prop("files"); $(files).each(function() { var fileInfo = {}; fileInfo.name = this.name; fileInfo.size = this.size; fileInfo.type = this.type; formData.filesInfo.push(fileInfo); }); $.post(url, formData).done(function (data) { alert(data); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="theForm"> <input type="file" id="inputFile"> <input type="submit" name="submit" id="submit"> </form>