设置 asp:Image Url 图片上传时 asp:FileUpload答案

【问题标题】：Set asp:Image Url When image is uploaded in asp:FileUpload设置 asp:Image Url 图片上传时 asp:FileUpload
【发布时间】：2016-06-06 10:40:25
【问题描述】：

在asp:FileUpload控件中选择图片后如何在asp:Image控件中显示图片而不点击任何按钮？

这是我的代码：

   <asp:Image runat="server" ID="img_edu" Width="100" Height="100" />
   <asp:FileUpload runat="server" ID="fileupload_edu" />

我浏览了很多链接，但不知道，因为我不想点击任何按钮。

我也见过 :http://www.aspforums.net/Threads/933229/Upload-image-using-FileUpload-and-display-in-Image-control-in-ASPNet/ 但同样的问题，即按钮点击。

谁能帮帮我。

提前致谢。

【问题讨论】：

标签： c# asp.net file-upload

【解决方案1】：

您可以使用 javascript 添加它。

 <script>
    function img() {
        var url = inputToURL(document.getElementById("<%=fileupload_edu.ClientID %>"));
        document.getElementById("<%=img_edu.ClientID %>").src = url;
    }
    function inputToURL(inputElement) {
        var file = inputElement.files[0];
        return window.URL.createObjectURL(file);
    }
</script>

你控制

 <asp:Image runat="server" ID="img_edu" Width="100" Height="100" />
        <asp:FileUpload runat="server" ID="fileupload_edu" ClientIDMode="Static" onchange="img();" />

【讨论】：

【解决方案2】：

您必须调用更改事件。

 <script>
    $(document).ready(function () {
        $("#<%= fileupload_edu.ClientID%>").change(function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                $("#<%= img_edu.ClientID%>").fadeIn("slow", function () {
                    $(this).attr("src", e.target.result).fadeIn();
                })
            }
            reader.readAsDataURL($(this)[0].files[0]);
        });
    });
</script>

【讨论】：

【解决方案3】：

试试这个，你需要一个onchange事件来检测文件何时加载

<asp:Image runat="server" ID="img_edu" Width="100" Height="100" />
<asp:FileUpload runat="server" onchange="LoadImg()" ID="fileupload_edu" />

然后用这个函数显示选中的文件

    function loadImg(element) {
      var tgt = element.target || window.event.srcElement, files = tgt.files;

      if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
          document.getElementById("<%=img_edu.ClientID%>").src = fr.result;
        }
        fr.readAsDataURL(files[0]);
      }
      else {

      }
   }

【讨论】：