Question

如何在asp中显示图像：在asp中选择图像后的图像控制：FileUpload Control没有任何按钮点击？

这是我的代码：

   <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/但同样的问题，即按钮点击。

任何人都可以帮助我。

提前致谢。

Answer 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();" />

Answer 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>

Answer 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 {

      }
   }

设置asp：Image Url在asp上传图像时：FileUpload

3 个答案: