如何为多个图片上传输入框绑定JavaScript onchange事件

问题1：是否需要为每个input编写单独的事件绑定？ #

不需要。这种写法会造成大量代码重复，后续修改逻辑时要重复改动多次，维护成本极高，完全没必要这么做。

问题2：更巧妙的实现方式 #

有两种简洁高效的方案，推荐使用：

方案1：利用属性前缀选择器匹配所有目标input #

借助jQuery的属性前缀选择器，直接匹配所有id以imageUploadID_开头的input，只需要绑定一次事件就能覆盖所有上传框：

jQuery(function($) {
    $('body').on('change', 'input[id^="imageUploadID_"]', function() {
        const $this = $(this);
        const file_data = $this.prop('files')[0];
        if (!file_data) return; // 避免用户取消选择文件时发起无效请求

        const form_data = new FormData();
        form_data.append('file', file_data);
        form_data.append('action', 'file_upload');
        form_data.append('security', blog.security);

        $.ajax({
            url: blog.ajaxurl,
            type: 'POST',
            contentType: false,
            processData: false,
            data: form_data,
            success: function (response) {
                alert("ok");
            }
        });
    });
});

方案2：给所有input添加统一class（更具可读性） #

先修改HTML，为所有上传input添加同一个class，比如image-upload-input：

<span id="enableFileUpload_1" class="upload-image-svg-wrapper">
  <input id="imageUploadID_1" class="image-upload-input" type="file" accept="image/*"/>
</span>
<span id="enableFileUpload_2" class="upload-image-svg-wrapper">
  <input id="imageUploadID_2" class="image-upload-input" type="file" accept="image/*"/>
</span>
<!-- 剩余3个上传框同理添加class -->

再通过class选择器绑定事件：

jQuery(function($) {
    $('body').on('change', '.image-upload-input', function() {
        const $this = $(this);
        const file_data = $this.prop('files')[0];
        if (!file_data) return;

        const form_data = new FormData();
        form_data.append('file', file_data);
        form_data.append('action', 'file_upload');
        form_data.append('security', blog.security);

        $.ajax({
            url: blog.ajaxurl,
            type: 'POST',
            contentType: false,
            processData: false,
            data: form_data,
            success: function (response) {
                alert("ok");
            }
        });
    });
});

额外优化提示 #

• 添加if (!file_data) return;可以过滤用户打开文件选择框后取消操作的场景，避免发起无意义的AJAX请求
• 可以在AJAX请求发起时给当前上传容器添加加载状态，请求完成后移除，提升用户感知

内容的提问来源于stack exchange，提问作者eligolf