Question

在 .NET WebForms 中使用 jquery 触发简单的 onchange 方法

2016-12-02

366

javascript jquery asp.net 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>

在 HTML 端，我有如下文件上传控件：

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

但是当我尝试选择图像时，出现错误：

Uncaught ReferenceError: loadImage is not defined(…)

我做错了什么？

Answer 1

删除 $.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>

Answer 2

您无法将从文件输入读取的值分配给图像。您必须先读取数据，如下所示

$(document).ready(function () {
       $('input[type="file"]').change(function(){
            readURL(this);
        });
        }); 
function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#output').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file"/>
<img id="output" src=""/>