上传第一个文件后停止更改事件答案

【问题标题】：Stop change event after you upload the first file上传第一个文件后停止更改事件
【发布时间】：2021-07-05 17:00:07
【问题描述】：

在我的主代码中，我有一个图标，当我单击它时会触发我的输入类型文件。我上传了一张图片，我在 img 标签中看到了这张图片。我只想更改该输入一次，因此在上传第一张图片后我无法更改它，并且我不希望该文件资源管理器再次打开。我在https://jsfiddle.net/1rchq2se/11/ 中创建了一个几乎相同的辅助代码。我有html代码

<div class="wrapper">
  <input type="file">
  <p>File name: <span class="file-name"></span></p>
</div>

我有 2 次尝试在第一次更改后停止该事件

/* first */
$('.wrapper').one("change", "input[type='file']", function(){
    $('.file-name').text($(this).val())
  $('.wrapper').off("change", "input[type='file']")
})
/* second */
var stopChange = false;
  if(stopChange == false){
  $('.wrapper').one("change", "input[type='file']", function(){
    $('.file-name').text($(this).val())
    stopChange = true;
  })
}

我的文件名不再更改，但我仍然可以打开该文件资源管理器有什么方法可以阻止它吗？在我的主代码中，我有一个函数，当调用该 img 时会更改 src，但总的来说与这里几乎相同

【问题讨论】：

关键可能在短语“上传后”中。上传是如何完成的？如果是默认表单提交，您可能需要在页面重新加载时禁用输入服务器端。如果是ajax上传方式就不同了
在我的主代码中，一个包含标题的输入，一个包含内容的输入，一个包含名称的输入，一个包含电子邮件的输入，在我可以上传 4 张图片并在提交按钮之后提交问题。
如果你想要 4 个文件，为什么要在可能只有一个文件之后阻止更改？使困惑。不确定你问的是否有意义
步骤是这样的：我们有一个包装器，在那里我有一个输入类型文件和一个 div，其中包含图像和触发该输入的图标。每次我上传图像时，都会出现另一个包装器。因此，如果我们说客户已经上传了 3 张图片并且他按下第一个 div，它将打开该文件资源管理器并可以更改第一张图片。我不希望这样，因为在每张图片下我都有一个可以删除该 div 的按钮。
这比所显示的要先进得多。您需要提供一个 minimal reproducible example 来证明该问题

标签： jquery input input-type-file

【解决方案1】：

这是我的主要代码

<div class="attachments-form-wrapper">
    <div class="bbp-attachments-form">
        <div class="attachment-wrapper">
            <input type="file" size="40" name="d4p_attachment[]">
            <div class="attachment-upload-button">
                <img class="preview-attachment no-src" src="//:0" />
                <div class="attachment-upload-button-placeholder">
                    <svg class="svg-icon icon-add-image">
                        <use xlink:href="#icon-add-image"></use>
                    </svg>
                    <div>Add image</div>
                </div>
            </div>
        </div>
    </div>
</div>

而jquery是这样的

var new_attachment = $('.attachment-wrapper').prop('outerHTML');

$(".attachments-form-wrapper").on('click', '.attachment-upload-button', function() {
    $(this).siblings('input').click();
});

function readImageURL(input) {
    if (input[0].files && input[0].files[0]) {
        for(var i=0,file; file=input[0].files[i]; i++) {
            var reader = new FileReader();
            reader.onload = function(e) {
                input.closest('.attachment-wrapper').find('.preview-attachment').attr('src', e.target.result).show().siblings().hide();
            }
            reader.readAsDataURL(input[0].files[i]); 
        }
        if($('.attachment-wrapper').length + 1 <= gdbbPressAttachmentsInit.max_files) {
            $('.attachment-wrapper').last().after(new_attachment);
        }
    } else {
        input.closest('.attachment-wrapper').find('.preview-attachment').hide().siblings().show();
    }
}

$(".attachments-form-wrapper").on('change', 'input[type=file]', function() {
    readImageURL($(this));
});

【讨论】：