js的XMLHttpRequest做文件上传进度条问题

那天早上 发布于 2013/11/08 10:04
阅读 4K+
收藏 0

XMLHttpRequest 做文件上传进度条显示

 xhr.upload.addEventListener("progress", uploadProgress, false); 这个监控到的进度条是真实的上传进度条么?

疑问1:为什么上传完成后服务器要过会才可以看到上传文件?

疑问2: xhr.onreadystatechange = state_Change;方法获取是否完成 为何成功会输出三次?

var xhr   
//多文件上传的独立方法
function uploadFile(file) {
    //创建FormData()对象            
    var fd = new FormData();
    fd.append("author", "Shiv Kumar");
    fd.append("name", "Html 5 File API/FormData");
    //文件对象 file            
    fd.append("fileToUpload", file);
    //准备使用ajax上传            
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = state_Change;
    //进度条            
    xhr.upload.addEventListener("progress", uploadProgress, false);
    //下载            
    xhr.addEventListener("load", uploadComplete, false);
    //错误信息            
    xhr.addEventListener("error", uploadFailed, false);
    //取消,此功能没有做            
    xhr.addEventListener("abort", uploadCanceled, false);
    //上传            
    xhr.open("POST", "Default.aspx");
    
    //发送            
    xhr.send(fd);
}
function state_Change() {
    if (xhr.readyState == 4) {// 4 = "loaded"
        if (xhr.status == 200) {// 200 = OK
           
            console.warn("成功");
        }
        else {
            alert("Problem retrieving XML data");
        }
    }
}
//进度条显示
function uploadProgress(evt) {
    //判断a有没有超出范围            
    if (a < fileNum && a != fileNum) {
        //此处的evt就是文件上传的所有信息。                
        //evt.lengthComputable,文件是否是空
        if (evt.lengthComputable) {
            //evt.loaded:文件上传的大小   evt.total:文件总的大小        


            console.warn(evt.loaded);
            
            var percentComplete = Math.round((evt.loaded) * 100 / evt.total);
            //加载进度条,同时显示信息                    
            document.getElementById("" + a + "").innerHTML = percentComplete.toString() + '%';
            document.getElementById("num" + a + "").value = percentComplete / 100;
            //如果上传的结果是100时才让加载下一个文件。如果不够100会继续上传原来的文档。                    
            if (percentComplete == 100) {
                a++;
                //加载下一个文档                        
                uploadFile(file[a])
            }
        }


    } ////  else { ////document.getElementsByName('progressNumber').innerHTML = 'unable to compute'; ////            }
}

加载中
0
狮子的魂
狮子的魂

问题1: 文件通常是上传到系统的临时目录, 然后验证后再拷贝到站点上传目录. 另外为了减少磁盘的写入次数, 写入也有一个缓冲的问题(这个不是主要原因)....

问题2: state_Change函数确实会执行很多次, 但是一次请求中readyState=4并且status=200的应该只会有一次. 你提供的代码并不会发生这个情况...

0
书一
书一
这个还是得看你后台的文件上传处理方法吧!比如你用nginx做了代理,那么你看到的必然不是真实的,还有就是你用的上传文件的组件包是否支持数据流读取过程的接口,有些文件上传包是将数据流保存在服务器临时目录的。
0
13123123
13123123
这你code写的有问题吧  第一肯定是先放在缓存上面 然后程序会写到自己目录下面  我表示 你这个应该是code写错了 upload控件很多 我表示你为什么要自己手动写 ?
返回顶部
顶部