点击隐藏文件输入jQuery错误

Click hidden file input jQuery error

本文关键字:jQuery 错误 输入 隐藏文件      更新时间:2023-09-26

我试图点击一个隐藏的输入file。我已经在这里测试过了,它工作得很好。

在实际项目中,我得到这个错误Uncaught RangeError: Maximum call stack size exceeded

这是我的:

HTML:

<div id="upload-image-container" class="upload-image-container inline-block">
    <h2 class="inline-block">+ Upload Your Photo!</h2>
    <input type="file" name="images" id="images" />
</div>
jQuery:

jQuery("#upload-image-container").click(function() {
    // e.preventDefault();
    jQuery("input[type='file']").click();
});

我已经尝试添加e.preventDefulte.preventImmediatePropagation,但我仍然得到相同的错误。

我真不知道怎样才能解决这个问题。

我在file输入上有一个监听器…图片自动上传。不确定这是不是导致问题的原因。我试着把它去掉,结果还是一样。

input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;
        for ( ; i < len; i++ ) {
            file = this.files[i];
            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) { 
                        // showUploadedItem(e.target.result, file.fileName);
                        jQuery("#filename").val(file.name);
                    };
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }
            }   
        }
        if (formdata) {
            jQuery.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    // document.getElementById("response").innerHTML = res; 
                }
            });
        }
    }, false);

写下来,

jQuery("input[type='file']").click(function(e){
  e.stopPropagation();
});

由于子进程引起的事件传播而引发错误。

如果我正确理解你,你需要触发点击事件只有当你点击h2标签。

在这种情况下,直接添加一个标识符到您的h2标签。

 <h2 id="uploadTagId" class="inline-block">+ Upload Your Photo!</h2>

并在script.js中将click事件附加到新的标识符上。

    $("#uploadTagId").click(function(e){
     jQuery("input[type='file']").click();
  });