[SOLVED] is it possible to upload files with ajax

[meomike2000]

is it possible to create a form that will be used to upload files using dom and ajax....

 

something like this maybe

 

var formtag = document.createElement('form');
	formtag.enctype = 'multipart/form-data';
	//formtag.type = 'multipart/form-data';
	formtag.id = 'uploadform';
	formtag.className = 'uploadform';
	formtag.onsubmit = function() { return false; }

	var upfolderinput = document.createElement('input');
	upfolderinput.id = 'upfolderinput';
	//upfolderinput.name = 'upfolderinput';
	upfolderinput.className = 'upfolderinput';
	upfolderinput.value = '       create new folder(up to 30 characters)';
	upfolderinput.onclick = function() {upfolderinput.value = '';uploadselect.disabled = true;uploadinput.disabled = false;}

	var uploadselect = document.createElement('select');
	uploadselect.multiple = false;
	uploadselect.name = 'uploadselect';
	uploadselect.id = 'uploadselect';
	uploadselect.className = 'uploadselect';
	uploadselect.onclick = function() {upfolderinput.disabled = true;uploadinput.disabled = false;}		
	for (var i = 0; i < (folders.length - 1); i++) {
		var y=document.createElement('option');
		y.text=folders[i];
		try
		  {
		  uploadselect.add(y,null); // standards compliant
		  }
		catch(ex)
		  {
		  uploadselect.add(y); // IE only
		  }
	}

	var uploadnewfolderDiv = document.createElement('div');
	uploadnewfolderDiv.id = 'uploadnewfolderDiv';
	uploadnewfolderDiv.className = 'uploadnewfolderDiv';

	formtag.appendChild(document.createTextNode('first'));
	formtag.appendChild(document.createElement('br'));		
	formtag.appendChild(upfolderinput);
	formtag.appendChild(document.createElement('br')); 
	formtag.appendChild(document.createTextNode('or select from an existing folder'));
	formtag.appendChild(document.createElement('br'));
	formtag.appendChild(uploadselect);
	formtag.appendChild(document.createElement('br'));

	var uploadinputDiv = document.createElement('div');
	uploadinputDiv.id = 'uploadinputDiv';
	uploadinputDiv.className = 'uploadinputDiv';

	var uploadinput = document.createElement('input');
	uploadinput.type = 'file';
	uploadinput.disabled = true;
	uploadinput.name = 'uploadinput';
	uploadinput.id = 'uploadinput' + self.uploadinputindex;
	uploadinput.className = 'uploadinput';
	uploadinput.onchange = self.testfiletype;

	var uploadhidden = document.createElement('input');
	uploadhidden.type = 'hidden';
	uploadhidden.name = 'MAX_FILE_SIZE';
	uploadhidden.id = 'uploadhidden';
	uploadhidden.className = 'hiddeninput';
	uploadhidden.value = '3000000';

	formtag.appendChild(document.createTextNode('next'));
	formtag.appendChild(document.createElement('br'));
	formtag.appendChild(uploadhidden);		
	formtag.appendChild(uploadinput);
	//formtag.appendChild(document.createTextNode(self.uploadinputindex)); 

	var uploadareacancel = document.createElement('input');
	uploadareacancel.type = 'button';
	uploadareacancel.id = 'uploadareacancel';
	uploadareacancel.className = 'uploadareacancel';
	uploadareacancel.value = 'cancel';		
	uploadareacancel.onclick = function() {self.uploadinputindex = 0;upfolderinput.value = 'enter a new folder name(up to 30 characters)';self.photopageDiv.appendChild(self.photosareaDiv);self.photopageDiv.removeChild(self.uploadareaDiv);div=self.photobuttonDiv;div.removeChild(self.closeupload);div.appendChild(self.openupload);}

	var uploadbutton = document.createElement('input');
	uploadbutton.type = 'button';
	uploadbutton.disabled = true; 
	uploadbutton.id = 'uploadbutton';
	uploadbutton.className = 'uploadbutton';
	uploadbutton.value = 'upload';		
	uploadbutton.onclick = function() {self.uploadinputindex = 0;upfolderinput.value = 'enter a new folder name(up to 30 characters)';self.saveupload();self.photopageDiv.appendChild(self.photosareaDiv);self.photopageDiv.removeChild(self.uploadareaDiv);div=self.photobuttonDiv;div.removeChild(self.closeupload);div.appendChild(self.openupload);}

	var uploadareabr = document.createElement('br');
	uploadareabr.className = 'clearBoth';

	var uploadareabr2 = document.createElement('br');
	uploadareabr2.className = 'clearBoth';

	//formtag.appendChild(uploadnewfolderDiv);
	//formtag.appendChild(uploadinputDiv);

	formtag.appendChild(uploadbutton);
	formtag.appendChild(uploadareacancel);
	formtag.appendChild(uploadareabr);
	formtag.appendChild(document.createElement('br'));

.......

 

the file info doesnt seam to get sent with the rest of the data......

[meomike2000]

well i did a little research and found a hidden iframe method where you can target the iframe that is hidden on the page ....

 

so now the script looks like this and it seems to work.......

var formtag = document.createElement('form');
	formtag.enctype = 'multipart/form-data';
	formtag.method = 'post';
	formtag.action = 'scripts/uploadsinglephoto.php?uid=' + self.uid;
	//formtag.type = 'multipart/form-data';
	formtag.id = 'uploadform';
	formtag.className = 'uploadform';
	//formtag.onsubmit = function() { return false; }

	var upfolderinput = document.createElement('input');
	upfolderinput.id = 'upfolderinput';
	//upfolderinput.name = 'upfolderinput';
	upfolderinput.className = 'upfolderinput';
	upfolderinput.value = '       create new folder(up to 30 characters)';
	upfolderinput.onclick = function() {upfolderinput.value = '';uploadselect.disabled = true;uploadinput.disabled = false;}

	var uploadselect = document.createElement('select');
	uploadselect.multiple = false;
	uploadselect.name = 'uploadselect';
	uploadselect.id = 'uploadselect';
	uploadselect.className = 'uploadselect';
	uploadselect.onclick = function() {upfolderinput.disabled = true;uploadinput.disabled = false;}		
	for (var i = 0; i < (folders.length - 1); i++) {
		var y=document.createElement('option');
		y.text=folders[i];
		try
		  {
		  uploadselect.add(y,null); // standards compliant
		  }
		catch(ex)
		  {
		  uploadselect.add(y); // IE only
		  }
	}

	var uploadnewfolderDiv = document.createElement('div');
	uploadnewfolderDiv.id = 'uploadnewfolderDiv';
	uploadnewfolderDiv.className = 'uploadnewfolderDiv';

	formtag.appendChild(document.createTextNode('first'));
	formtag.appendChild(document.createElement('br'));		
	formtag.appendChild(upfolderinput);
	formtag.appendChild(document.createElement('br')); 
	formtag.appendChild(document.createTextNode('or select from an existing folder'));
	formtag.appendChild(document.createElement('br'));
	formtag.appendChild(uploadselect);
	formtag.appendChild(document.createElement('br'));

	var uploadinputDiv = document.createElement('div');
	uploadinputDiv.id = 'uploadinputDiv';
	uploadinputDiv.className = 'uploadinputDiv';

	var uploadinput = document.createElement('input');
	uploadinput.type = 'file';
	uploadinput.disabled = true;
	uploadinput.name = 'uploadinput';
	uploadinput.id = 'uploadinput' + self.uploadinputindex;
	uploadinput.className = 'uploadinput';
	uploadinput.onchange = self.testfiletype;

	var uploadhidden = document.createElement('input');
	uploadhidden.type = 'hidden';
	uploadhidden.name = 'MAX_FILE_SIZE';
	uploadhidden.id = 'uploadhidden';
	uploadhidden.className = 'hiddeninput';
	uploadhidden.value = '3000000';

	formtag.appendChild(document.createTextNode('next'));
	formtag.appendChild(document.createElement('br'));
	formtag.appendChild(uploadhidden);		
	formtag.appendChild(uploadinput);
	//formtag.appendChild(document.createTextNode(self.uploadinputindex)); 

	var uploadareacancel = document.createElement('input');
	uploadareacancel.type = 'button';
	uploadareacancel.id = 'uploadareacancel';
	uploadareacancel.className = 'uploadareacancel';
	uploadareacancel.value = 'cancel';		
	uploadareacancel.onclick = function() {self.uploadinputindex = 0;upfolderinput.value = 'enter a new folder name(up to 30 characters)';self.photopageDiv.appendChild(self.photosareaDiv);self.photopageDiv.removeChild(self.uploadareaDiv);div=self.photobuttonDiv;div.removeChild(self.closeupload);div.appendChild(self.openupload);}

	var uploadbutton = document.createElement('input');
	uploadbutton.type = 'button';
	uploadbutton.disabled = true; 
	uploadbutton.id = 'uploadbutton';
	uploadbutton.className = 'uploadbutton';
	uploadbutton.value = 'upload';		
	uploadbutton.onclick = function() {formtag.target = 'upload_target';formtag.submit();self.uploadinputindex = 0;upfolderinput.value = 'enter a new folder name(up to 30 characters)';self.photopageDiv.appendChild(self.photosareaDiv);self.photopageDiv.removeChild(self.uploadareaDiv);div=self.photobuttonDiv;div.removeChild(self.closeupload);div.appendChild(self.openupload);}

	var uploadareabr = document.createElement('br');
	uploadareabr.className = 'clearBoth'

 

if there is a better way i would like to know........

 

thanks mike