Question

我试图在jquery中异步两个函数，第一个打开文件对话框，第二个是在ImageBox上显示图像

这是我的代码

<%@ Page Language="C#" ClientIDMode="static" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Trips.test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-3.0.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">

    function previewFile() {
        var preview = document.querySelector('#<%=ImageBox.ClientID %>');
        var file = document.querySelector('#<%=FileUploadx.ClientID %>').files[0];
        var reader = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
        }
    };

    function clk() {
        document.getElementById('#<%=FileUploadx.ClientID %>').click();
    };

</script>
</head>
<body>
    <form id="form1" runat="server">
        <input id="FileUploadx" runat="server" name="file" hidden="hidden" onchange="previewFile()" type="file" />
        <asp:Button ID="btnUpload" runat="server" OnClientClick="return clk().done(previewFile());" Text="Upload" />
        <asp:Image ID="ImageBox" runat="server" Height="225px" ImageUrl="~/Images/NoUser.jpg" Width="225px" />
    </form>
</body>
</html>

但是我在控制台中遇到了这个错误：

未捕获的TypeError：无法读取属性＆＃39;点击＆＃39;为null 在clk

Answer 1

在一种情况下，您使用的是document.querySelector，而在另一种情况下，您是通过ID请求它。

使用querySelector方法时，您既可以将#移动到getElementByID，也可以放弃null。

您收到此错误，因为没有带有该ID的元素（因此它是bootstrap-select）并且您尝试在该值上调用函数。

如何在从jquery调用fileupload.click函数后显示图像

1 个答案: