Javascript 在.NETWebForms中使用jquery触发简单的onchange方法

我试图在用户尝试上传图像时触发一个简单的事件/预览，预览后（裁剪并编辑它，他将单击保存）。到目前为止，我所做的和正在尝试的是：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
        $(document).ready(function () {
           function  loadImage(event) {
                var output = $('#<%=FileUpload1.ClientID%>').val();
                output.src = URL.createObjectURL(event.target.files[0]);
            };
        }); 
    </script>
</asp:Content>

<asp:FileUpload ID="FileUpload1" onchange="loadImage(this)" runat="server"  /></div>

---

我做错了什么？

删除

$.ready

调用，因为您刚刚定义了函数

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
           function  loadImage(event) {
                var output = $('#<%=FileUpload1.ClientID%>').val();
                output.src = URL.createObjectURL(event.target.files[0]);
            };
    </script>
</asp:Content>

函数loadImage（事件）{
变量输出=$（'#'）.val（）；
output.src=URL.createObjectURL（event.target.files[0]）；
};

删除

$.ready

调用，因为您刚刚定义了函数

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
           function  loadImage(event) {
                var output = $('#<%=FileUpload1.ClientID%>').val();
                output.src = URL.createObjectURL(event.target.files[0]);
            };
    </script>
</asp:Content>

函数loadImage（事件）{
变量输出=$（'#'）.val（）；
output.src=URL.createObjectURL（event.target.files[0]）；
};

您不能将文件输入的读取值指定给图像。您必须先读取数据，如下所示

$（文档）.ready（函数（）{
$（'input[type=“file”]”）。更改（函数（）{
readURL（this）；
});
}); 
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#output'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}

---

您不能将文件输入的读取值指定给图像。您必须先读取数据，如下所示

$（文档）.ready（函数（）{
$（'input[type=“file”]”）。更改（函数（）{
readURL（this）；
});
}); 
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#output'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}

loadImage

在本例中是一个本地函数，onchange无法找到它。将其移出

ready

函数。

loadImage

在这种情况下是一个本地函数，onchange无法找到它。将其移出

ready

功能。