调用fileupload.click后显示图片及jQuery异步执行函数报错排查

先来说说你遇到的两个核心问题，以及对应的解决方案：

一、为什么会出现Cannot read property 'click' of null错误？ #

这个问题很好排查：你在clk函数里用document.getElementById('#<%=FileUploadx.ClientID %>')的时候，多写了一个#符号。getElementById()方法接收的是纯ID字符串，不需要加CSS选择器的#前缀，所以导致找不到元素返回null，自然就调用不了click()方法了。

二、如何正确触发文件选择并预览图片？ #

另外你的按钮OnClientClick写法也有问题：clk()没有返回Promise，所以不能用.done()；而且你已经给FileUpload控件绑定了onchange="previewFile()"，用户选择文件后会自动触发这个方法，完全不需要手动调用。同时还要阻止按钮默认的表单提交行为，否则页面刷新会直接丢失预览效果。

修正后的完整代码 #

<%@ 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() {
    // 去掉多余的#号，直接用ID获取元素
    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" />
<!-- 返回false阻止表单提交，只需要调用clk()即可 -->
<asp:Button ID="btnUpload" runat="server" OnClientClick="clk(); return false;" Text="Upload" />
<asp:Image ID="ImageBox" runat="server" Height="225px" ImageUrl="~/Images/NoUser.jpg" Width="225px" />
</form>
</body>
</html>

代码逻辑说明 #

• 触发文件对话框：点击btnUpload按钮时，调用clk()函数，通过getElementById找到隐藏的FileUploadx控件并触发其click()事件，打开系统文件选择对话框。
• 图片预览：当用户选择好文件后，FileUploadx的onchange事件自动触发previewFile()函数，利用FileReader将文件内容读取为DataURL格式，然后赋值给ImageBox的src属性，实现本地图片预览。
• 阻止页面刷新：按钮的OnClientClick最后返回false，避免ASP.NET按钮默认的表单提交行为，防止页面刷新导致预览的图片直接丢失。

内容的提问来源于stack exchange，提问作者Mohammad Sufian Al-Omar