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

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

如果选择同一个文件，input[type=file]的onChange事件将不会触发。

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

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

Answer 2

同步部分正确关于onchange事件，它不会针对同一个文件触发..如果输入类型文件（ ether 提到的场景）考虑的话，更正好更改事件触发的文件位置。

选择任何文件后尝试此操作

在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 3

感谢编程节奏带领我走上正轨我所做的只是在场上再次添加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 4

@Sync给了我解决这个问题的想法。

以下是工作代码，您需要做的是克隆文件输入。

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

并且该事件仍将在第二次被触发。

Answer 5

角度

HTML

<input #photoInput type="file" />

TS

export class SomeComponent {

 @ViewChild('photoInput') photoInput;

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

Answer 6

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

因此，如果您具有可以上载和“删除”图像的组件之类的东西，请执行以下操作：

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

您的onChange可以是：

onChange(event) {

    const files = 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
    target.value = ''
}

Answer 7

完成文件操作后，可以重置FileList。

在我的React应用中，我有这个：

const handleLoad = evt => {
  if (evt.target.files && evt.target.files[0]) {
    dispatch(loadFile(evt.target.files[0].path));
  }
  // Reset the FileList, as otherwise the second and subsequent times
  // we browse, nothing will happen, because nothing changed.
  evt.target.files = new FileList();
};

Answer 8

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

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

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

8 个答案:

选择任何文件后尝试此操作