同一表单使用两个input[type=file]时无法实现单次点击上传文件问题

问题原因 #

• 原有JS代码使用全局选择器匹配文件输入框，点击任意上传按钮都会触发所有文件输入框的点击事件，浏览器仅会弹出第一个输入框的选择窗口，因此点击第二个上传区域时无法直接唤起对应输入框，才会出现需要双击的异常表现。
• 原有预览逻辑同样使用全局选择器匹配预览图元素，上传任意文件都会同时修改两个区域的预览图，后续使用也会出现异常。

修复代码 #

替换原有JS逻辑即可：

$(document).ready(function () {
    var readURL = function (input, previewEl) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                previewEl.attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $(".file-upload").on('change', function () {
        // 匹配当前输入框对应区域的预览图
        let currentPreview = $(this).closest('.choose-image').find('.profile-pic');
        readURL(this, currentPreview);
    });

    $(".upload-button").on('click', function (e) {
        e.preventDefault();
        // 仅触发当前按钮对应区域的文件输入框
        $(this).closest('.choose-image').find('.file-upload').click();
    });
});

可选优化 #

你当前CSS中对文件输入框设置了两次隐藏规则：

1. .file-upload { display: none; }
2. .choose-image input.file-upload { opacity: 0; visibility: hidden; position: absolute; }

建议删除第一条display: none的规则，部分低版本浏览器对设置了display: none的元素触发点击事件存在兼容问题，保留第二种隐藏方式即可正常工作。

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