jQuery + 网络表单:调用 ashx,并刷新图像作为结果
-
19-09-2019 - |
题
考虑使用 jQuery 库的 ASP.NET 页面 上传.
以下是 ASP.NET Web 表单页面上的事件序列:
- 用户单击文件上传控件。普通的旧 HTML
<input type="file" />
- 用户使用浏览对话框从系统中选择图像文件。一切正常。
- 触发 jQuery 事件。它调用一个 ashx 并按预期正确上传。
- 现在文件已上传, 我怎样才能改变
<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 方法中完成吗
解决方案
您绝对可以在不进行回发的情况下执行此操作。您所需要的只是获取上传图像的路径。从 Uploadify
我认为你可以从中获取路径 fileObj
属性或从服务器返回它 response property
:
文件对象:包含有关所选文件的详细信息的对象。
- 姓名 – 文件名
- 文件路径 – 上传文件在服务器上的路径
- 尺寸 – 文件的大小(以字节为单位)
- 创建日期 – 文件创建日期
- 修改日期 – 文件修改的最后日期
- 类型 – 以“.”开头的文件扩展名
回复:从服务器发回的数据。
现在如果你的 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);
}
不隶属于 StackOverflow