[Jquery] Onchange file input fire once :(

JavaScript
1

Hi,
I don’t see why on earth this
works only the first time
JS


function ajaxFileUpload()
	{
		$("#loading")
		.ajaxStart(function(){
			$(this).show();
		})
		.ajaxComplete(function(){
			$(this).hide();
		});

		$.ajaxFileUpload
		(
			{
				url:'/glider/xhr',
				secureuri:false,
				fileElementId:'filename',
				dataType: 'json',
				success: function (data, status)
				{
					if(typeof(data.error) != 'undefined')
					{
						if(data.error != '')
						{
							alert(data.error);
						}else
						{
							alert(data.msg);
						}
					}
					alert('Immagine caricata, procedi con l\\'attivazione della copertina.');
					$('#glider-preview').attr('src',data.info);
					$("#title").val('');
                    $("#description").val('');
                    $('.nodisplayglider').show();
					
				},
				error: function (data, status, e)
				{
					alert(e);
				}
			}
		)
		
		return false;

	}
function prepareUpload(){
    $('.nodisplayglider').hide();
    ajaxFileUpload();
}
$("#filename").change(prepareUpload);
$('.nodisplayglider').show();

XHTML


<style>
input,textarea {
    width: 300px;
    margin: 3px 0;
    
}
input {
   padding: 1px 0;
   
}
textarea{
    height: 250px;
}
.myradio label {
    display:inline;
}
.myradio input {
   width:15px;
}
#filename{
    width: 300px;
}
#glider_submit{
    width: 100px;
}
.nodisplayglider{
    display:none;
}

</style>
<form id="frm-glider" action="/admin/glider/index" method="post" enctype="multipart/form-data">
 
<input type="hidden" name="csrf" value="6aa65f6ef42c39a71765ad74a146cfbf" id="csrf" /><table cellpadding="0" cellspacing="0">
<tr class="nodisplayglider">
  <td><label for="status" class="titleCell">In uso :</label></td>
   <td class="fieldCell myradio" align="left">

<label for="status-0"><input type="radio" name="status" id="status-0" value="0" class="radio" />No</label> <label for="status-1"><input type="radio" name="status" id="status-1" value="1" checked="checked" class="radio" />Si</label></td>
</tr>
<tr class="nodisplayglider">
 <td><label for="title" class="titleCell">Titolo :</label></td> 
  <td class="fieldCell">
<input type="text" name="title" id="title" value="fffffffffffffffffffffffffffffff" maxlength="255" title="titolo" class="" /></td>            
</tr>
<tr class="nodisplayglider">
   <td><label for="description" class="titleCell">Descrizione :</label></td>
   <td class="fieldCell">

<textarea name="description" id="description" title="descrizione" class="" rows="24" cols="80">ffffffffffffffffff</textarea></td>
</tr>
<tr>
  <td><label for="filename" class="titleCell">Scegli file:</label></td>
   <td class="fieldCell">
   <input type="hidden" name="MAX_FILE_SIZE" value="2097152" id="MAX_FILE_SIZE" />

<input type="file" name="filename" id="filename" class="input-file" /><img id="loading" src="/static/images/glider-loading.gif" style="display:none;"><br />
   (ATTENZIONE: La foto selezionata dovr&#224; avere queste dimensioni 633px X 234px)
      </td>
</tr>

<tr class="nodisplayglider">
  <td></td>
  <td align="left">
<input type="submit" name="glider_submit" id="glider_submit" value="Aggiorna" class="glider-submit" /></td>
</tr>
</table>
</form>

PLUGIN
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

the element (file input) with id #filename
is always in the DOM :frowning:

Can you help me, please ?

Bye.

2

I worked out with:


function ajaxFileUpload()
	{
		$("#loading")
		.ajaxStart(function(){
			$(this).show();
		})
		.ajaxComplete(function(){
			$(this).hide();
		});

		$.ajaxFileUpload
		(
			{
				url:'/glider/xhr',
				secureuri:false,
				fileElementId:'filename',
				dataType: 'json',
				success: function (data, status)
				{
					if(typeof(data.error) != 'undefined')
					{
						if(data.error != '')
						{
							alert(data.error);
						}else
						{
							alert(data.msg);
						}
					}
					alert('Immagine caricata, procedi con l\\'attivazione della copertina.');
					$('#glider-preview').attr('src',data.info);
					$("#title").val('');
                    $("#description").val('');
                    $('.nodisplayglider').show();
					$("#filename").change(prepareUpload);
				},
				error: function (data, status, e)
				{
					alert(e);
				}
			}
		)
		
		return false;

	}

I’ve added

$(“#filename”).change(prepareUpload);

inside the ajaxFileUpload.