append formdata using document.getElementById

Question

Ok the below code is sending the file name but for the form data its sending [object HTMLInputElement] or [object HTMLSelectElement] what do I need to change to get the value in the form?

function _(el){
return document.getElementById(el); }

function uploadFile(){
var file = _("file1").files[0];
//alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
formdata.append("djname", _("djname"));
formdata.append("archive_date", _("archive_date"));
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "include/file_upload_parser.php");
ajax.send(formdata); }

Some of the form

Date of Broadcast:
<input type='date' id='archive_date' name='archive_date' required>
Show Descripton (optional):<br>
<textarea rows='4' id='description' cols='50' name='description'>
<input type="file" name="file1" id="file1" accept="audio/mp3"><br>

score 0 · Accepted Answer · answered Jan 07 '14 at 11:58

0

You have to get the value from the elements much like you took the file from the file input.

formdata.append("djname", _("djname").value);
formdata.append("archive_date", _("archive_date").value);

answered Jan 07 '14 at 11:58

Musa

96,336
17
118
137

score 0 · Answer 2 · edited May 23 '17 at 12:19

As you are using XMLHttpRequest:

function ajax(a,b,e,d,c){// Url,callback,method,formdata
 c=new XMLHttpRequest;
 c.onload=b;
 c.open(e||'get',a);
 c.send(d||null)
}

Some More info about the ajax function

https://stackoverflow.com/a/18309057/2450730

html

<form id="form">
Date of Broadcast:
<input type='date' name='archive_date' required>
Show Descripton (optional):<br>
<textarea rows='4' cols='50' name='description'>
<input type="file" name="file1" accept="audio/mp3"><br>
</form>

multiple files

<input type="file" name="file[]" accept="audio/mp3" multiple>

js

function fu(){alert('upload finished')}

window.onload=function(){
 var form=document.getElementById('form');
 form.onsubmit=function(e){
  e.preventDefault()
  ajax('include/file_upload_parser.php',fu,'post',new FormData(this));
  //or
  //ajax('include/file_upload_parser.php',fu,'post',new FormData(form));
 }
}

This sends the whole form .

As you can see there is no need to write this long code for the formdata & ajax + you can reuse the ajax function for other stuff.

EDIT

ajax function with progress handlers. f=upload g=download

function ajax(a,b,e,d,f,g,c){
 c=new XMLHttpRequest;
 !f||(c.upload.onprogress=f);
 !g||(c.onprogress=g);
 c.onload=b;
 c.open(e||'get',a);
 c.send(d||null)
}

so

ajax('include/file_upload_parser.php',fu,'post',new FormData(form),progressHandler);

append formdata using document.getElementById

2 Answers2