延迟javascript函数,直到文件上传到asp页面

时间:2012-01-11 21:12:56

标签: javascript jquery file-upload asp-classic vbscript

有人可以告诉我如何延迟重置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返回到主页面以便稍后使用,所以如果有人也可以通知我。

提前感谢您的帮助。

2 个答案:

答案 0 :(得分: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'
    });
}

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

在您的主要问题上,您可以为load元素设置<iframe>事件处理程序作为上传中的回调函数:

$('#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');
});

答案 1 :(得分:0)

我会使用全局回调方法:

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>