延迟javascript函数，直到文件上传到asp页面之后

Question

谁能告诉我如何延迟 div 背景图像的重置，直到文件上传完成？然而，所有部件都单独工作 我必须通过弹出警报来延迟背景设置，然后在单击确定之前离开一段时间 - 我不能这样做，因为用户不知道在按下之前要离开多长时间...... 任何帮助表示赞赏，尽管我应该说我简要地查看了 jquery/ajax，但发现它只能在 IE 中工作一次，然后才需要刷新页面

HTML...

<iframe id="MyFrame" name="MyFrame" style="display:none;"></iframe>
<form id="browseform" method="post" action="disp_photosave.asp" enctype="multipart/form-data"  target="MyFrame">
    <p>Please select your photo...</p>
    <img src="Images/button_browse.gif">
        <input type="hidden" name="tab" value="0">
        <input type="file"  id="upload" name="filesent" onchange="this.form.submit(); load_bk_photo()">
        <input type="hidden" name="tempid" value="<%=(TId)%>">
        <input type="hidden" name="side" value="<%=(strSide)%>">
        <input type="hidden" name="varid" value="<%=(Request.querystring("varid"))%>">
        <input type="hidden" name="prodid" value="<%=(Request.querystring("prodid"))%>">
</form>

javascript...

function load_bk_photo(){
    var activeId = '<%=(activeTempStoreId)%>'
    var redStr_id = "side1"
    d = new Date();
    time_temp = d.getTime();
    photoUrl = "photos/merged_"+activeId+"_"+redStr_id+".png?"+d.getTime()
        alert ("timebbb = "+time_temp )
    $('#resizable-img').css('background-image','url("' + photoUrl + '")');
    $('#resizable-img').css('display','block');
}

disp_photosave.asp 上的 vbscript...

<%
Set Upload = Server.CreateObject("csASPUpload.Process")
Set Image = Server.CreateObject("csImageFile.Manage")

prodid = prodSet.Fields.Item("id").Value
redStr = "side1"
fieldPrefix = "front_"

If Upload.FileQty > 0 Then
    Image.ReadVariant Upload.FileData(0)
    Image.WriteFile Server.MapPath("this works ok"
      Image.ResizeFit scale_width, scale_height
      Image.WriteFile Server.MapPath("this works ok"
    storeHeight = Image.Height
    storeWidth = Image.Width

    Set MyConn=Server.CreateObject("ADODB.Connection")
        MyConn.Open "dsn=xxx;uid=xxx;password=xxx;"
        SQLString = "this works ok"
        MyConn.Execute(SQLString)
        MyConn.Close
    Set MyConn = Nothing
End if
%>

我还需要将值 storeHeight 和 storeWidth 返回到主页以供以后使用，所以如果有人也可以就此提出建议。

提前感谢您的帮助。

Answer 1

您的load_bk_photo 函数存在一些问题（缺少分号、创建全局变量），请尝试更改为：

function load_bk_photo(){

    //we can use the `var` keyword once and separate each variable declaration by a comma, then finish all the declarations with a semi-colon
    var activeId  = '<%=(activeTempStoreId)%>',
        redStr_id = "side1",
        d         = new Date(),
        time_temp = d.getTime(),
        photoUrl  = "photos/merged_" + activeId + "_" + redStr_id+".png?" + time_temp;

    alert ("timebbb = " + time_temp );

    //you can use one `.css()` function call to do both operations
    $('#resizable-img').css({
        'background-image' : 'url("' + photoUrl + '")',
        display            : 'block'
    });
}

您正在创建全局变量，只有在您更改此函数范围之外的变量值时才需要这样做。

在您的主要问题上，您可以将 <iframe> 元素的 load 事件处理程序设置为上传时的回调函数：

$('#MyFrame').on('load', function () {
    //The iframe has loaded and you can do what you want, including get the contents of the iframe (server-response)
    var response = $(this).contents().find('body').text();
});

确保在更改<iframe> 的源之前设置此绑定。

请注意，.on() 是 jQuery 1.7 中的新内容，在这种情况下与 .bind() 相同。

.on():http://api.jquery.com/on

更新

我不知道 asp 经典，但如果你在你的 asp 代码中输出类似 storeWidth|storeHeight 的东西，那么你可以在你的 JavaScript 中得到那个响应并用它做你想做的事：

$('#MyFrame').on('load', function () {
    //The iframe has loaded and you can do what you want, including get the contents of the iframe (server-response)
    var response = $(this).contents().find('body').text().split('|');
    alert(response[0] + 'x' + response[1] + 'px');
});

Answer 2

我会使用全局回调方法：

JavaScript：

window.uploadComplete = function (returnData) {
    $('#resizable-img').css('background-image','url("' + returnData.photoUrl + '")');
    $('#resizable-img').css('display','block');  
    alert(returnData.storeHeight + "|" + returnData.storeWidth);
}

在 ASP 中，将其返回给 iFrame：

<script>
parent.uploadComplete({photoUrl: "urltophoto",storeHeight: "<value from asp var>", storeWidth: "<value from asp var>"});
</script>