La deuxième utilisation du fichier d'entrée ne donne pas lieu à onchange plus

J'ai une photo bouton de téléchargement qui télécharge automatiquement le fichier lorsqu'il est sélectionné à partir de la fenêtre de navigation.

Néanmoins, il ne fonctionne pas la deuxième fois, et c'est parce que l'événement onChange n'est pas déclenché. Pourquoi donc?

Voici un cas d'utilisation:

1. Sur clic du bouton, je l'appelle uploadMessagePicture(), qui ouvre la fenêtre de navigation.

2. Lorsque l'utilisateur a sélectionné une image, un événement onChange est détectée, ce qui déclenche la ajaxFileUpload() et affiche la photo en zone de l'éditeur.

3. Lorsque le téléchargement est terminé, un aperçu de l'image s'affiche.
4. L'utilisateur supprime l'image en appelant deleteMessageImage() (qui permet également d'effacer les champs et se cache l'éditeur de photos).

5. L'utilisateur tente de télécharger une autre image.

À ce stade, la fenêtre de navigation s'affiche, mais lorsque je sélectionne une image, l'événement onChange n'est pas déclenché si rien ne se passe... (d'ailleurs, il ne semble pas que le nom de fichier est même transféré à l'entrée de valeur de champ.)

Je suis sur Firefox 23.0.1

Voici le code HTML:

<a class="im-photo-btn" href="javascript:;" onclick="javascript:uploadMessagePicture();"><i class="icon-join-photo"></i></a>

<div class="editor-photoarea" id="editor-photoarea" style="display:none;">
    <input name="image_message_file" type="hidden" id="image_message_file" value="" />
    <div id="image_message_upload">
        <input name="image-message" type="file" id="image-message" style="display:none; visibility:hidden;" /> 
        <!-- hide it and trigger it from the photo btn (need both display:none + visibility:hiden for browser compatibility) -->
    </div>
    <div class="loading" id="image_message_loading" style="display:none;"><img alt="<?php echo $lang["Loading"];?>" src="lib/immedia/img/ajax-loader.gif" /> <?php echo $lang["Loading"];?></div>
    <div class="preview" style="display:none;" id="image_message_preview">
        <!-- <div>Image preview :</div>
        <div id='small_message_msg'></div>
            <img src='' />
            <div class='btnoptions'>
                <a onclick='javascript:deleteMessageImage();' href='javascript:;' class='button' title="Delete photo">
                    <span class='ui-icon ui-icon-closethick smsg'></span>Delete
                </a>
         </div>-->
</div>

Ici, c'est le javascript pour télécharger automatiquement l'image

$(document).ready(function (){
    $("#image-message").on('change', function () {
        $('#editor-photoarea').show();
        ajaxFileUploadMessagePicture();
    });
});

function uploadMessagePicture(){
    //trigger the browse click
    if($('#image_message_file').val() == ''){
        //let the person upload a file only if none are there
        $('#image-message').trigger('click');
    }
}

function ajaxFileUploadMessagePicture(){
$("#msg_error_no_image_message").hide();

var imageName = $("#image-message").val();
if(imageName != ''){
    $("#image_message_loading").show();
    $('#sendBtn').attr('disabled', 'disabled');

    $.ajaxFileUpload
    (
        {
            url:siteRegionDir+'lib/immedia/uploadMessagePicture.php',
            secureuri:false,
            fileElementId:'image-message',
            dataType: 'json',
            success: function (data, status)
            {
                updateMessagePicture(data);             
            },
            error: function (data, status, e)
            {
                alert(e);
            }
        }
    )   
}else{
    $("#msg_error_no_image_message").show();
}
return false;
}

Ici, c'est le Javascript pour supprimer la photo et effacer les champs

function deleteMessageImage(){
//delete the image
var file = $("#image_message_file").val();

if(file != '') {
    $.post(siteRegionDir+'lib/immedia/deleteMessagePicture.php',{filename:file}, function(data) {   
            clearPictureAttachment();               
            $('#editor-photoarea').hide();//make sure it is hidden
        },"html"  
    );
}else{      
    clearPictureAttachment();
    $('#editor-photoarea').hide();//make sure it is hidden
}
}

function clearPictureAttachment(){
//var control = $("#image-message");
$("#image-message").attr('value', '');
//control.replaceWith( control = control.clone( true ) );//so it resets it all, truw = keep the bound events
$("#image_message_file").attr('value', '');
$("#image_message_loading").hide();
$("#image_message_upload").show();
$("#image_message_preview").hide();
}

Toute aide serait super! Merci!

OriginalL'auteur ether | 2013-10-28