如何在客户端获取图像由jquery设置的asp图像控件的ImageUrl?

时间:2017-03-01 09:53:57

标签: jquery html asp.net

我在aspx页面中有一个图像和按钮服务器控件。

<asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />  
<asp:Image ID="impPrev" runat="server" Height="200px" /> 
<input type="file" name="ImageUpload" id="ImageUpload" onchange="ShowPreview(this)" />

我还有一个html文件类型输入控件,使用它我可以使用jquery从

更改客户端的asp图像控件的imageUrl
function ShowPreview(FileUpload1) {
   if (FileUpload1.files && FileUpload1.files[0]) {
      var file = FileUpload1.files[0];
      var ImageDir = new FileReader();
      if (file) {
         ImageDir.readAsDataURL(file);
      }  
      ImageDir.addEventListener('load', function () {
         $('#impPrev').attr('src', ImageDir.result);
      });
   }
}

如果我试图从代码隐藏中获取url新设置的图像,如

protected void btnUpload_Click(object sender, EventArgs e) {
   var path = impPrev.ImageUrl;
}

空字符串正在返回“path”。 如何获得jquery设置的图像的实际路径?

1 个答案:

答案 0 :(得分:1)

我相信您无法获得服务器端的价值,因为表单不会回发以获取到达服务器的信息。此外,图像不会存储在服务器中的任何位置以从服务器端获取URL路径。但是您可以使用隐藏字段并将所需值设置为该字段来获取图像属性,例如名称,客户端路径等。

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />  
        <asp:Image ID="impPrev" runat="server" Height="200px" /> 
        <input type="file" name="ImageUpload"   id="ImageUpload" onchange="ShowPreview(this)" />
       ** <input type="hidden" runat="server" id="myhid" />**
    </div>
    </form>
</body>
</html>

function ShowPreview(FileUpload1) {
    if (FileUpload1.files && FileUpload1.files[0]) {
        var file = FileUpload1.files[0];
        var ImageDir = new FileReader();
        if (file) {
            ImageDir.readAsDataURL(file);
        }
        ImageDir.addEventListener('load', function () {
        $('#impPrev').attr('src', ImageDir.result);
        $('#myhid').val(file.name);
        }); 
    }
}

 protected void btnUpload_Click(object sender, EventArgs e)
        {
            //var path = impPrev.ImageUrl;
            var test = myhid.Value;
        }
相关问题