var updater = null;
var libSuffix = new Array("HDX","JAR");
function startStatusCheck()
{
document.getElementById('status').innerHTML = "";
document.getElementById("a").innerHTML="";
//设置上传按钮为不可用状态,避免多次提交
document.getElementById('submitButton').disabled = true;
//取得文件名
//var element = $("importFile").value;
var element=document.getElementById("importFile").value;
if ((element == "") || (element == "undefine") || (element == null)) {
alert(selectFile);
document.getElementById("submitButton").disabled = false;
return false;
}
var subfix = element.substring(element.lastIndexOf(".")+1).toUpperCase();
if (!isRightSuffix(subfix)) {//扩展名正确
alert(selectPackage);
document.getElementById("submitButton").disabled = false;
return false;
}
lockWindow('MsgWindow');
//创建周期性发送请求的Ajax对象
updater=setInterval("ajax_peroid()",1000);
return true;
}
function ajax_peroid(){
$.ajax({
async:true,
url: 'upload/fileupload',
type: 'get',
dataType: 'html',
cache:false,
data:'c=status',//参数设置
error: reportError,//错误处理,隐藏进度条
success: function(data,evt){
document.getElementById("status").innerHTML=data;
}
});
}
//出错时处理方法
function reportError(request)
{
document.getElementById('submitButton').disabled = false;
document.getElementById('status').innerHTML = '<div class="error"><b>Error communicating with server. Please try again.</b></div>';
document.getElementById('a').innerHTML="<input id=\"buttonok\" type=\"button\" class=\"button\" value=buttonOk onclick=\"unlockWindow('MsgWindow')\" />";
document.getElementById('buttonok').value=buttonOk;
}
//上传完毕后,取消周期性获取进度状态,将最终的状态显示在客户端
function killUpdate(message)
{
document.getElementById('submitButton').disabled = false;
//停止刷新获取进度
clearInterval(updater);
if(message != '')//如果有错误信息,则显示出来
{
document.getElementById('status').innerHTML = '<div class="error"><b>' + message + '</b></div>';
document.getElementById('a').innerHTML="<input id=\"buttonok\" type=\"button\" class=\"button\" value=buttonOk onclick=\"unlockWindow('MsgWindow')\" />";
document.getElementById('buttonok').value=buttonOk;
}else{
reloadLib();
}
}
function stopUpdate(message)
{
//停止刷新获取进度
clearInterval(updater);
document.getElementById('status').innerHTML = message;
window.parent.document.location=path+'/home/login.jsp';
}
function reloadLib(){
var url = path + "/admin/DocMgmt.do";
window.location.href=url;
}
//判断扩展名是否正确
function isRightSuffix(subfix)
{
for( var i=0; i<libSuffix.length; i++)
{
if( subfix === libSuffix[i])
{
return true;
}
}
return false;
}
分享到:
相关推荐
- 配合JavaScript(例如jQuery或Vue.js)监听上传事件,与后端保持通信,实时更新进度条状态。 4. **进度条组件** - 常见的前端进度条组件有Bootstrap的`progress-bar`,或者自定义CSS样式来创建。 - 接收到后端...
为了实现在前端展示上传进度,可以使用 AJAX 技术结合 JavaScript 来实现。以下是一个简单的示例代码: ```html <!DOCTYPE html> ; charset=utf-8" /> <title>Nginx 上传进度 Demo <script type="text/...
标题 "c# ,js请高手帮忙在附件源码里添加上传进度显示" 暗示我们需要探讨的是如何在C#后端与JavaScript前端之间实现文件上传时的进度显示功能。这个功能常见于Web应用中,它能提升用户体验,让用户了解文件上传的...
为了实现文件上传进度显示,还需要注意以下几点: 1. **分块上传**:对于大文件,可以使用分块上传策略,每次上传一小部分,然后更新进度条。这需要在服务器端支持接收并合并分块文件的功能。 2. **安全性**:确保...
总的来说,"显示上传的进度的jquery上传工具"是一个实用的前端解决方案,通过jQuery和Uploadify插件,你可以轻松地在你的Web应用中添加功能完善的文件上传功能,同时提供友好的用户体验,包括实时的上传进度指示。...
前端JavaScript中,可以使用`XMLHttpRequest.upload.onprogress`事件监听文件上传进度。当收到后端返回的进度信息后,更新UI展示。此外,考虑到用户体验,还需要处理中断和重试机制,以防网络不稳定导致的上传失败。...
这个过程如果能实时显示每个文件的上传进度,将极大地提升用户体验。本文将深入探讨如何实现"多文件上传,并显示每一个的进度"这一功能,涉及前端技术和后端处理。 首先,前端部分。这里提到的前端框架有easyUI、...
### 通过 AJAX 监控文件上传进度 在 Web 开发中,文件上传是常见的功能之一。传统的文件上传机制是基于 HTTP 协议的表单提交,即用户通过 `<input type="file">` 选择文件后,整个表单或文件被一次性发送到服务器。...
在JavaScript中,XMLHttpRequest或者Fetch API提供了监听上传进度的事件,如`progress`事件,可以根据已上传的字节数与总字节数计算出当前的上传进度,并更新UI上的进度条。 再者,图片缩略图的生成通常在客户端...
以上就是利用jQuery.form.js插件结合canvas实现图片上传进度圈效果的整个过程。通过这种方式,我们可以提供一个用户友好的界面,让用户在等待文件上传时有一个明确的反馈,提高应用的交互性和专业性。在实际开发中,...
2. **进度条展示**:使用JavaScript和HTML5的File API,可以实时获取到上传进度,更新UI中的进度条。 3. **断点续传**:如果可能,支持用户在上传中断后继续上传未完成的部分,提高了用户体验。 4. **错误处理**:...
在本项目中,"javascript+HTML5 多文件上传(插件)多进度条显示"是一个实现这一功能的实例,它允许用户选择并上传多个文件,并在上传过程中实时显示每个文件及整体的上传进度。下面将详细介绍这个技术实现的关键...
总的来说,实现“图片上传进度”功能涉及到前端技术的多个方面,包括HTML5的`<input type="file">`元素的样式定制、`FileReader` API的使用以及JavaScript事件监听。通过这些技术,我们可以构建出用户体验友好且功能...
标题"struts2+dwr+自己实现的progresslistener监控上传进度"表明我们将讨论如何在Struts2和DWR的结合中,通过自定义的ProgressListener来实现文件上传进度的实时监控。这在大型文件上传时尤其重要,因为它提供了用户...
`box`类定义了一个带有圆角的灰色背景,`clip`类用于创建红色的进度条,通过修改`clip`属性来改变进度条的宽度,从而反映出上传进度。 ```html <div id="progressspan" class="clip"></div> ``` 2. **本地文件...
5. **显示上传进度**:利用`plupload`的`Progress`事件,可以实时更新上传进度条,展示当前文件的上传进度。 6. **处理异常**:确保捕获并处理可能出现的错误,比如网络问题、文件大小超限等。通过`Error`事件,...
2. **事件监听**:为SWFUpload添加事件监听器,如`fileQueued`(文件加入队列)、`uploadProgress`(上传进度更新)、`uploadSuccess`(上传成功)等,以便在前端显示进度和反馈结果。 3. **后端处理**:编写...
二、JavaScript上传原理 1. **签名授权**:在JavaScript中进行OSS上传,首先需要为每个上传请求生成签名。这个签名包含了访问密钥、过期时间等信息,用于验证请求的合法性。 2. **SDK使用**:OSS服务商通常会提供...
要实现文件上传进度条,我们需要使用到Layui的AjaxUpload组件,该组件可以用来上传文件并显示上传进度。我们可以使用`layui.upload`方法来上传文件,并使用`on`方法来监听上传进度。 例如: ```javascript layui....
AJAX(Asynchronous JavaScript and XML)技术的引入,配合JSP(JavaServer Pages),可以实现在不刷新整个页面的情况下进行异步文件上传,并且能够动态更新上传进度,极大地提升了用户交互体验。下面我们将详细探讨...