`
ganjuelovejava
  • 浏览: 94017 次
  • 性别: Icon_minigender_2
  • 来自: 湖南
社区版块
存档分类
最新评论

js上传进度

    博客分类:
  • JS
阅读更多
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;
}
分享到:
评论

相关推荐

    java 上传文件,实时获取上传进度.

    - 配合JavaScript(例如jQuery或Vue.js)监听上传事件,与后端保持通信,实时更新进度条状态。 4. **进度条组件** - 常见的前端进度条组件有Bootstrap的`progress-bar`,或者自定义CSS样式来创建。 - 接收到后端...

    Nginx文件上传进度显示

    为了实现在前端展示上传进度,可以使用 AJAX 技术结合 JavaScript 来实现。以下是一个简单的示例代码: ```html &lt;!DOCTYPE html&gt; ; charset=utf-8" /&gt; &lt;title&gt;Nginx 上传进度 Demo &lt;script type="text/...

    c# ,js请高手帮忙在附件源码里添加上传进度显示

    标题 "c# ,js请高手帮忙在附件源码里添加上传进度显示" 暗示我们需要探讨的是如何在C#后端与JavaScript前端之间实现文件上传时的进度显示功能。这个功能常见于Web应用中,它能提升用户体验,让用户了解文件上传的...

    php 文档上传进度

    为了实现文件上传进度显示,还需要注意以下几点: 1. **分块上传**:对于大文件,可以使用分块上传策略,每次上传一小部分,然后更新进度条。这需要在服务器端支持接收并合并分块文件的功能。 2. **安全性**:确保...

    显示上传的进度的jquery上传工具

    总的来说,"显示上传的进度的jquery上传工具"是一个实用的前端解决方案,通过jQuery和Uploadify插件,你可以轻松地在你的Web应用中添加功能完善的文件上传功能,同时提供友好的用户体验,包括实时的上传进度指示。...

    多文件上传,并显示每一个的进度

    这个过程如果能实时显示每个文件的上传进度,将极大地提升用户体验。本文将深入探讨如何实现"多文件上传,并显示每一个的进度"这一功能,涉及前端技术和后端处理。 首先,前端部分。这里提到的前端框架有easyUI、...

    基于Java Web的HTTP文件上传进度显示的解决方案

    前端JavaScript中,可以使用`XMLHttpRequest.upload.onprogress`事件监听文件上传进度。当收到后端返回的进度信息后,更新UI展示。此外,考虑到用户体验,还需要处理中断和重试机制,以防网络不稳定导致的上传失败。...

    通过AJAX监控文件上传进度

    ### 通过 AJAX 监控文件上传进度 在 Web 开发中,文件上传是常见的功能之一。传统的文件上传机制是基于 HTTP 协议的表单提交,即用户通过 `&lt;input type="file"&gt;` 选择文件后,整个表单或文件被一次性发送到服务器。...

    上传文件(图片缩略图上传带进度显示)

    在JavaScript中,XMLHttpRequest或者Fetch API提供了监听上传进度的事件,如`progress`事件,可以根据已上传的字节数与总字节数计算出当前的上传进度,并更新UI上的进度条。 再者,图片缩略图的生成通常在客户端...

    jQuery.form.js结合canvas上传图片显示进度圈效果

    以上就是利用jQuery.form.js插件结合canvas实现图片上传进度圈效果的整个过程。通过这种方式,我们可以提供一个用户友好的界面,让用户在等待文件上传时有一个明确的反馈,提高应用的交互性和专业性。在实际开发中,...

    ajax大附件上传,可以看到上传进度

    2. **进度条展示**:使用JavaScript和HTML5的File API,可以实时获取到上传进度,更新UI中的进度条。 3. **断点续传**:如果可能,支持用户在上传中断后继续上传未完成的部分,提高了用户体验。 4. **错误处理**:...

    javascript+HTML5 多文件上传(插件)多进度条显示

    在本项目中,"javascript+HTML5 多文件上传(插件)多进度条显示"是一个实现这一功能的实例,它允许用户选择并上传多个文件,并在上传过程中实时显示每个文件及整体的上传进度。下面将详细介绍这个技术实现的关键...

    图片上传进度

    总的来说,实现“图片上传进度”功能涉及到前端技术的多个方面,包括HTML5的`&lt;input type="file"&gt;`元素的样式定制、`FileReader` API的使用以及JavaScript事件监听。通过这些技术,我们可以构建出用户体验友好且功能...

    struts2+dwr+自己实现的progresslistener监控上传进度

    标题"struts2+dwr+自己实现的progresslistener监控上传进度"表明我们将讨论如何在Struts2和DWR的结合中,通过自定义的ProgressListener来实现文件上传进度的实时监控。这在大型文件上传时尤其重要,因为它提供了用户...

    js实现文件上传进度条

    `box`类定义了一个带有圆角的灰色背景,`clip`类用于创建红色的进度条,通过修改`clip`属性来改变进度条的宽度,从而反映出上传进度。 ```html &lt;div id="progressspan" class="clip"&gt;&lt;/div&gt; ``` 2. **本地文件...

    js代码实现图片上传阿里云OSS

    5. **显示上传进度**:利用`plupload`的`Progress`事件,可以实时更新上传进度条,展示当前文件的上传进度。 6. **处理异常**:确保捕获并处理可能出现的错误,比如网络问题、文件大小超限等。通过`Error`事件,...

    ExtJs批量文件上传显示进度前后代码

    2. **事件监听**:为SWFUpload添加事件监听器,如`fileQueued`(文件加入队列)、`uploadProgress`(上传进度更新)、`uploadSuccess`(上传成功)等,以便在前端显示进度和反馈结果。 3. **后端处理**:编写...

    oss实现js上传

    二、JavaScript上传原理 1. **签名授权**:在JavaScript中进行OSS上传,首先需要为每个上传请求生成签名。这个签名包含了访问密钥、过期时间等信息,用于验证请求的合法性。 2. **SDK使用**:OSS服务商通常会提供...

    Layui实现文件上传进度条

    要实现文件上传进度条,我们需要使用到Layui的AjaxUpload组件,该组件可以用来上传文件并显示上传进度。我们可以使用`layui.upload`方法来上传文件,并使用`on`方法来监听上传进度。 例如: ```javascript layui....

    AJAX+JSP实现基于WEB的文件上传的进度控制

    AJAX(Asynchronous JavaScript and XML)技术的引入,配合JSP(JavaServer Pages),可以实现在不刷新整个页面的情况下进行异步文件上传,并且能够动态更新上传进度,极大地提升了用户交互体验。下面我们将详细探讨...

Global site tag (gtag.js) - Google Analytics