jquery上传文件时，等待界面实现

用两个DIV层交替显示实现。

前端：

<!--上传合同------------------------------------------------------------------->
<div id="w_file" title="合同上传">
<div id="w_file_main">? ?//主界面层
? <div style="width: 100%; height: 30px; background-color: #006666; font-size: medium; font-weight: bold; text-align: center; vertical-align: middle; color: #FFFFFF">请上传合同电子文档，需要PDF格式。</div>
? <table width="100%" cellspacing="15px">
? <tr><td></td><td></td></tr>
? <tr><td>申请序号：</td><td><span id="sqxh"></span></td></tr>
? <tr><td>合同编号：</td><td><span id="w_file_htbh"></span></td></tr>
? <tr><td>甲方单位：</td><td><span id="w_file_jf"></span></td></tr>
? <tr><td>乙方单位：</td><td><span id="w_file_yf"></span></td></tr>
? <tr><td>合同金额：</td><td><span id="w_file_je"></span></td></tr>
? <tr><td>选择文件：</td><td><input id="w_file_input_file" type="file" accept=".pdf"?
? ? ? ? ? style="width: 300px; height: 25px;" /></td> ?</tr>
? <tr><td></td><td style="text-align: center"><input id="w_file_bnt_qd"?
? ? ? ? ? type="button" ?οnclick="w_file_bnt_qd" value="确定"?
? ? ? ? ? style=" width: 80px; height: 28px"/>&nbsp;
? ? ? ? ? <input id="w_file_bnt_qx" type="button" οnclick="w_file_bnt_qx" value="取消" style=" width: 80px; height: 28px"/></td></tr>
? </table>
</div>
<div id="w_file_wait" style="display: none">? //等待层
<table width="100%" cellspacing="0px">
<tr><td align="center"><img alt="" src="../img/load.gif" height="150px" width="200px" /></td></tr>
<tr><td style="text-align: center">正在上传文件，请您稍候.......</td></tr>
</table>

</div>
</div>

定义模式窗口

? ? ? ? //对话框设置
? ? ? ? $("#w_file").dialog({
? ? ? ? ? ? bgiframe: false,
? ? ? ? ? ? modal: true,
? ? ? ? ? ? autoOpen: false,
? ? ? ? ? ? width: 510,
? ? ? ? ? ? height: 400
? ? ? ? });

显示窗口

//打开上传窗口
function sq_upload(idh) {
? ? $("#w_file_main").css("display", "block");? ?//显示主界面层
? ? $("#w_file_wait").css("display", "none");? ? //隐藏等待层
? ? $("#sqxh").text(idh);
? ? $.get("sh_gethtbh.aspx?idh=" + idh, function (data, status, xhr) {
? ? ? ? var aa = $.parseJSON(data);
? ? ? ? var rec = new CRec(aa);
? ? ? ? rec.MoveNext(); ?//第0行
? ? ? ? $("#w_file_htbh").text(rec.GetValues("htbh"));
? ? ? ? $("#w_file_jf").text(rec.GetValues("jfmc"));
? ? ? ? $("#w_file_yf").text(rec.GetValues("yfdw"));
? ? ? ? $("#w_file_je").text(rec.GetValues("spje1"));
? ? ? ? $("*").stop(false, true);
? ? ? ? $("#w_file").dialog("close");
? ? ? ? $("#w_file").dialog("open");? ?//显示窗口
? ? });
}

上传合同

function w_file_bnt_qd() {
? ? s = "#pdfbz" + $("#sqxh").text();
? ? pdfbz = $(s).text(); ? //等于1为已上传过
? ? var objectfile = document.getElementById("w_file_input_file");
? ? if (objectfile.value == "") {
? ? ? ? return;
? ? }
? ? var file = document.getElementById("w_file_input_file").files[0];

? ? var formData = new FormData();
? ? var s_url = "w_file_upload.aspx?idh=" + $("#sqxh").text();
? ? formData.append('pdf', file);
? ? $.ajax({
? ? ? ? url: s_url,
? ? ? ? type: 'POST',
? ? ? ? data: formData,
? ? ? ? processData: false,
? ? ? ? contentType: false,
? ? ? ? async: true,? ?//这里要注意
? ? ? ? cache: false,
? ? ? ? beforeSend: function () {? ?
? ? ? ? ? ? $("#w_file_main").css("display", "none");? //主界面隐藏
? ? ? ? ? ? $("#w_file_wait").css("display", "block");? ?//等待层显示
? ? ? ? },
? ? ? ? success: function (data) {
? ? ? ? ? ? $("#w_file_main").css("display", "block");? ?//主界面显示
? ? ? ? ? ? $("#w_file_wait").css("display", "none");? ? ?//等待层隐藏
? ? ? ? ? ? $("#w_file").dialog("close");
? ? ? ? ? ? //如果是重新上传则刷新页面,否则加载局部
? ? ? ? ? ? if (pdfbz == 1) {
? ? ? ? ? ? ? ? jAlert("上传：" + file.name + " 成功，请刷新页面！", "提示");
? ? ? ? ? ? }

? ? ? ? ? ? load();

? ? ? ? }
? ? });
}