第二次使用输入文件不再触发onchange

Question

我有一个图片上传按钮,当从浏览窗口中选择时,它会自动上传文件.
尽管如此,它第二次不起作用,这是因为没有触发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();
}

任何帮助都会很棒!谢谢!

Answer 1

如果您使用 React 或一般只使用 javascript，您还可以做的是“重置”事件目标的值。

因此，如果您有一个可以上传和“删除”图像的组件：

<input type="file" onChange={onChange} />

你onChange可以：

onChange(event) {

    const files = event.target.files;

    // your logic here on what to do with files (maybe fetch the preview or something)

    // this line right below will reset the 
    // input field so if you removed it you can re-add the same file
    event.target.value = ''
}

Answer 2

解决此问题的最简单方法是添加 onclick 并将值每次设置为 null：

<input name="fileUpload" type="file" onclick="this.value = null"/>

Answer 3

我的猜测是你一遍又一遍地用相同的图片文件测试你的功能.

如果选择相同的文件,input[type=file]则不会触发onChange事件.

具有相同名称的不同文件也不会触发该事件.选择一个不同的图像文件 - 它会发生.

为避免这种情况,您可以重置表单以确保在干净的file控件上执行选择文件

Answer 4

Synch对于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()内)将重置文件输入类型,您可以选择相同的图像文件,没有任何问题.

干杯:)

Answer 5

感谢codingrhythm带领我走上了正确的道路。
我所做的实际上是在字段上再次添加on（“ change”）调用。
所以我只更改了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();
});
}

再次感谢！

Answer 6

有角的

超文本标记语言

<input #photoInput type="file" /> 

TS

export class SomeComponent {

 @ViewChild('photoInput') photoInput;

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