jQuery .on('change', function() {} 未在 asp.net Fileupload 控件上触发

Question

我的 aspx 页面中有一个 Fileupload 控件和一个 img 标签，我可以在其中上传图片并在 img 标签中显示。

<asp:FileUpload ID="f_UploadImage" runat="server" />
    <br />
<img id="myUploadedImg" alt="Photo" style="width: 180px;" />

由于某些原因，我没有使用 HTML 输入标签。通过使用下面的代码，我正在访问 fileupload 更改触发器，在单击“选择文件”选项时可以正常工作。

<script type="text/javascript">
$("#f_UploadImage").on('change', 'input', function () {
        var file, img;
        if ((file = this.files[0])) {
            img = new Image();
            img.onload = function () {
                sendFile(file);
            };
            img.onerror = function () {
                alert("Not a valid file:" + file.type);
            };
            img.src = _URL.createObjectURL(file);
        }
});
</script>

问题是：当我在我的 aspx 页面中放置另一个 HTML 按钮 id (btn_upload) 并单击该按钮时，我启用了对文件上传单击事件的访问，但是当我选择文件我的文件上传更改触发器不会触发。下面是我尝试使用另一个按钮的代码。

$("#btn_upload").on('click', function () {
        $('#f_UploadImage').trigger('click');
    });

    $("#f_UploadImage").on('change', 'input', function () {
        var file, img;
        if ((file = this.files[0])) {
            img = new Image();
            img.onload = function () {
                sendFile(file);
            };
            img.onerror = function () {
                alert("Not a valid file:" + file.type);
            };
            img.src = _URL.createObjectURL(file);
        }
});

Answer 1

直接绑定change事件应该可以工作了：-

$("#f_UploadImage").change(function () {

我已经验证了这一点，它对我来说工作正常。

我的代码：

 <asp:FileUpload ID="fuTest" runat="server" />
 <input type="button" id="btnTest" value="Upload" />

JS：

$(document).ready(function () {
    $("input#fuTest").change(function () {
        alert(1);
     });

     $("#btnTest").click(function () {
        $("#fuTest").trigger("click");
     });
});

更新：

根据您的输入，您的代码在form 标记内不起作用，因为默认情况下button 控件的类型是submit，因此在您的情况下，它将表单发回服务器或以其他方式回发正在发生并且您的客户端代码无法正常工作。因此，为了防止在现有代码中出现这种情况，您可以像这样使用preventDefault：-

$("#btnUpload").click(function (e) {
     e.preventDefault();
     $("#fuImage").trigger("click");
});

\或\

您可以将按钮类型设置为按钮，因此它不会将表单发布到服务器：-

 <button type="button" id="btnUpload">Upload Image</button>