1

考虑一个使用 jQuery 库Uploadify的 ASP.NET 页面。

以下是 ASP.NET 网络表单页面上的事件序列：

  1. 用户单击文件上传控件。普通的旧 HTML<input type="file" />
  2. 用户使用浏览对话框从他们的系统中选择一个图像文件。一切正常。
  3. 触发一个 jQuery 事件。它调用按预期正确上传的 ashx。
  4. 现在文件已上传，如何<asp:image>在调用 .aspx 页面上更改？真的很想在没有回发的情况下做到这一点！

这是代码！

<asp:Image ID="imgChangeMe" runat="server" /><br />
<input type="file" name="uploadify" id="uploadify" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#uploadify").uploadify({
        'uploader'       : 'scripts/uploadify/uploadify.swf',
    'script'         : 'uploadify.ashx',
    'folder'         : 'uploads',
    'queueID'        : 'fileQueue',
    'auto'           : true,
    'multi'          : true
        });
       });
 </script>

问题：

您将如何实现更改<asp:image>以反映用户刚刚上传的图像？

这个问题真的不应该与上传库有关，而是如何对 .ashx 的返回/执行结束做出反应？这是否应该在另一个 jQuery 方法中完成

4

1 回答 1

2

您绝对可以在不进行回发的情况下做到这一点。您只需要获取上传图像的路径即可。从Uploadify文档中我认为您可以从属性中获取路径fileObj或从服务器返回它response property：

fileObj：一个对象，包含有关所选文件的详细信息。

  • name - 文件的名称
  • filePath – 服务器上上传文件的路径
  • size - 文件的大小（以字节为单位）
  • creationDate – 文件的创建日期
  • modifyDate – 文件修改的最后日期
  • type – 以“.”开头的文件扩展名</li>

response：从服务器发回的数据。

现在，如果您的 aspx 图像是这样的：

<aspx:image id="myImage"...../>

您可以按如下方式设置：

 //Uploadify hookup

 'onComplete': function(evt, qid, fObj, res){
     var f = fObj.filePath + fObj.name; //PUT SLASH IF REQUIRED BETWEEN
     $("img[id$='myImage']").attr("src",f);

     //for future readers who might be using master pages.
     $('#<%=myImage.ClientID %>').attr("src", f);
     $('#<%=txtMyImgPath.ClientID %>').val(f);
 }
于 2009-10-06T04:41:45.313 回答