Второе использование входного файла больше не вызывает onchange

у меня есть кнопка загрузки изображения, которая автоматически загружает файл при выборе в окне просмотра.
Тем не менее, он не работает во второй раз, и это потому, что событие onChange не запускается. Почему это так?

вот пример:
1. При нажатии кнопки я вызываю uploadMessagePicture(), который открывает окно просмотра.
2. Когда пользователь выбрал изображение, обнаруживается событие onChange, которое запускает ajaxFileUpload () и показывает область редактора фотографий.
3. По завершении загрузки отображается предварительный просмотр изображения. 4. Пользователь удаляет изображение, вызвав deleteMessageImage() (который также очищает поля и скрывает редактор фотографий).
5. Пользователь пытается загрузить другое изображение.

в этот момент появляется окно обзора, но когда я выбираю изображение, событие onChange не запускается, поэтому ничего не происходит... (Кроме того, не похоже, что имя даже передается в поле "Значение ввода".)
Я на Firefox 23.0.1

вот 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>

вот javascript для автоматической загрузки изображения

$(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;
}

вот Javascript, чтобы удалить изображение и очистить поля

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();
}

любая помощь будет здорово! Спасибо!

9
file-upload html javascript jquery

5 ответов

Я предполагаю, что вы проверяете свою функциональность с одним и тем же файлом изображения снова и снова.

если вы выберете тот же файл, событие onChange input[type=file] не будет огня.

другой файл с тем же именем не будет запускать событие. Выберите другой файл изображения - это произойдет.

чтобы избежать этого, вы можете сбросить форму, чтобы убедиться, что выбор файла будет выполнен на чистом file управления

9

синхронизация частично прав о событии onchange, которое он не будет запускать для того же файла..Точнее onchange в случае файла типа ввода (сценарий, упомянутый эфир) рассматривает расположение файла для запуска события.

попробуйте это после выбора любого файла

в jQuery $("#image_message_upload [type='file']")[0].value

вы получите что-то вроде "C:\fakepath\country-and-mobile-redirect-for-wordpress-dwpsxm-clipar.формат JPG " в качестве вывода (то есть расположение выбранного файла)

это означает, что вы меняете имя файла или его местоположение, что неправильно. Итак, более логично, что мы можем сделать при удалении файла, установив атрибут входного значения пустым ("")

$("#image_message_upload [type='file']")[0].value=""

поэтому добавление этой строки (внутри clearPictureAttachment(), в соответствии с этим вопросом) сбросит тип ввода файла, и вы можете выбрать тот же файл изображения без проблем.

Ура :)

6

спасибо codingrhythm для ведет меня по правильному пути.
То, что я сделал, это на самом деле просто добавить вызов on("изменить") снова на поле.
Поэтому я только изменил функцию clearPictureAttachment () (вызываемую при удалении изображения) на это:

function clearPictureAttachment(){
$("#image-message").attr('value', '');    
$("#image_message_file").attr('value', '');
$("#image_message_loading").hide();
$("#image_message_upload").show();
$("#image_message_preview").hide();
//reenable the onchange to upload a picture
$("#image-message").on('change', function () {
    $('#editor-photoarea').show();
    ajaxFileUploadMessagePicture();
});
}

еще раз спасибо!

4

@Sync дал мне идею решить эту проблему.

вот рабочий код, что вам нужно сделать, это клонировать входного файла.

var control = $('input[type=file]');
control.replaceWith( control = control.clone( true ) );

и событие все равно будет запущено во второй раз.

3

угловое

HTML-код

<input #photoInput type="file" />

TS

export class SomeComponent {

 @ViewChild('photoInput') photoInput;

 clearPictureAttachment() {
  this.photoInput.nativeElement.value = '';
 }
}
1