form submit onchange

[felice_gatt]

ragazzi... problemino piccolissimo... vi illustro direttamente la situazione:

questo è il form

<form action="processupload.php" method="post" enctype="multipart/form-data" id="UploadForm"> 
<input name="ImageFile" type="file" /> 
<input type="submit" id="SubmitButton" value="Upload" /> 
</form> 
<div id="progressbox"><div id="progressbar"></div ><div id="statustxt">0%</div ></div> 
<div id="output"></div>

questo invece è lo script che esegue l'upload con progression bar

<script> 
        $(document).ready(function() { 
		//elements
		var progressbox 	= $('#progressbox');
		var progressbar 	= $('#progressbar');
		var statustxt 		= $('#statustxt');
		var submitbutton 	= $("#SubmitButton");
		var myform 			= $("#UploadForm");
		var output 			= $("#output");
		var completed 		= '0%';
		
				$(myform).ajaxForm({
					beforeSend: function() { //brfore sending form
						submitbutton.attr('disabled', ''); // disable upload button
						statustxt.empty();
						progressbox.show(); //show progressbar
						progressbar.width(completed); //initial value 0% of progressbar
						statustxt.html(completed); //set status text
						statustxt.css('color','#000'); //initial color of status text
					},
					uploadProgress: function(event, position, total, percentComplete) { //on progress
						progressbar.width(percentComplete + '%') //update progressbar percent complete
						statustxt.html(percentComplete + '%'); //update status text
						if(percentComplete>50)
							{
								statustxt.css('color','#fff'); //change status text to white after 50%
							}
						if(percentComplete==100)
							{
								progressbar.css({"background-color":"#bcdc9d"}); 
							}
						},
					complete: function(response) { // on complete
					
						output.html(response.responseText); //update element with received data
						myform.resetForm();  // reset form
						submitbutton.removeAttr('disabled'); //enable submit button
						progressbox.hide(); // hide progressbar
						$(myform)[0].reset();
						
					}
			});
			
        }); 

    </script>

ORA... vorrei che l'upload si eseguisse direttamente alla selezione dell'immagine; per esempio:

<input name="ImageFile" type="file" onChange="this.form.submit();" />

in questa maniera, il form si invia ma senza barra di caricamento... come risolvo ?
Grazie in anticipo delle risposte

[cavicchiandrea]

Prova cosi

<script> 
        $(document).ready(function() { 
		//elements
		var progressbox 	= $('#progressbox');
		var progressbar 	= $('#progressbar');
		var statustxt 		= $('#statustxt');
		var submitbutton 	= $("#SubmitButton");
		var myform 			= $("#UploadForm");
		var output 			= $("#output");
		var completed 		= '0%';
$('#ImageFile').change(function(){		
				$(myform).ajaxForm({
					beforeSend: function() { //brfore sending form
						submitbutton.attr('disabled', ''); // disable upload button
						statustxt.empty();
						progressbox.show(); //show progressbar
						progressbar.width(completed); //initial value 0% of progressbar
						statustxt.html(completed); //set status text
						statustxt.css('color','#000'); //initial color of status text
					},
					uploadProgress: function(event, position, total, percentComplete) { //on progress
						progressbar.width(percentComplete + '%') //update progressbar percent complete
						statustxt.html(percentComplete + '%'); //update status text
						if(percentComplete>50)
							{
								statustxt.css('color','#fff'); //change status text to white after 50%
							}
						if(percentComplete==100)
							{
								progressbar.css({"background-color":"#bcdc9d"}); 
							}
						},
					complete: function(response) { // on complete
					
						output.html(response.responseText); //update element with received data
						myform.resetForm();  // reset form
						submitbutton.removeAttr('disabled'); //enable submit button
						progressbox.hide(); // hide progressbar
						$(myform)[0].reset();
						
					}
			});
			});
        }); 

    </script>

e togli l'evento onchange dal input file e aggiugigli l'id

[felice_gatt]

credo che non hai capito, sono certo che è possibile risolvere,
all'onchange dovrei applicare qualche funzione che attivi l'ajaxForm facendo comunque passare la variabile submitbutton

[felice_gatt]

Originariamente inviato da cavicchiandrea
Ops come non detto ho capito male

e già ;D mi sa di si

[felice_gatt]

niente da fare... non va ;D grazie comunque

[Vindav]

$("input[name='ImageFile']").change(function(){
    $('form').submit();
});

[felice_gatt]

1 a 0 per vindav ;D grazie mille