javascript - 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 输入标记。通过使用下面的代码，我正在访问文件上传更改触发器，单击“选择文件”选项时该触发器工作正常。

<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) 并单击该按钮时，我启用了对 fileupload 点击事件的访问，但是当我选择文件我的文件上传更改触发器不触发。下面是我尝试使用另一个按钮的代码。

$("#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

直接绑定(bind)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>