Php 如何使用带有进度条的AJAX上传文档

我想为我的站点创建一个上传页面，以便异步上传文档，我尝试使用AJAX，但AJAX对用户文件系统的访问有限，当信息发送到服务器时，只有文件名显示，没有目录，我想建议如何在不使用JQuery的情况下轻松完成此操作，我还想知道是否有办法监控文件上传的进度，这样我就可以在我的网站上添加进度条

function createXMLHttpRequestObject(){
var xmlHttp     =   3;

if(window.ActiveXObject){
    try{
        //test for new version of internet Explorer
        xmlHttp     =   new ActiveXObject("Msxml.XMLHTTP");
    }
    catch(e){
        try{
            xmlHttp     =   new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e){
            xmlHttp =   2;
        }
    }
}

else{
    try{
        xmlHttp =   new XMLHttpRequest();
    }
    catch(e){
        xmlHttp =   1;
    }

}

if(!xmlHttp){
    alert("Error creating Objece");
}
else{
    var xHttpArr = new Array();
    xHttpArr.push(xmlHttp);
    var i = xHttpArr.length - 1;
    return xHttpArr[i];
}
}

function process(xmlHttp, i){
if(xmlHttp.readyState   == 4 || xmlHttp.readyState  == 0){
    //value =   encodeURIComponent( objRef.value );

    xmlHttp.open("GET", "php/AjaxBody.php?value="+i, true);
    xmlHttp.onreadystatechange  =   handleServerResponse;
    xmlHttp.send(null);
}
else{
    alert("Hold on");
}
}



function handleServerResponse(){

if(test.readyState == 1 || test.readyState == 2 || test.readyState == 3){

}

if (test.readyState == 4){
    if(test.status == 200){
        txtResponse =   test.responseText;
        bodyDiv =   document.getElementById("body");
        bodyDiv.innerHTML   =   txtResponse;

    }
    else{
        alert("Error with the xmlHttp status");
    }
}
/*
else{
    alert("Error with the xmlHttp readystate: " + x.status);
} */
}

上面是创建对象的代码

    button.onclick = function() {
    send = createXMLHttpRequestObject();
    frmUpload = document.getElementById("frmUpload");
    file = document.getElementById("fileUpload");
    processSending(send, frmUpload);
}

当调用process方法发送文件时， 在我尝试回显文件路径的服务器上，只有名称出现，如下所示

<?php
echo $_GET['value'];
?>

您可以使用

文件读取器

将文件读入

阵列缓存

或

二进制字符串

中，然后使用多个请求发送例如1MB大小的包。然后，接收php脚本必须通过将每个接收到的部分附加到文件中来“重建”该文件。这还可以解决在服务器上回显文件路径的问题，因为在写入之前，您可以（并且必须）决定将其保存在何处

首先，您的文件上传错误。文件上载要求您使用表单执行正确的POST请求，因为它要求

enctype

form属性为

multipart/form data

。为什么？浏览器通过POST请求发送二进制文件数据，并通过POST请求对数据进行正确编码，以便在服务器上读取。任何其他方式，您都只需在服务器上获取文件名（您可以使用Fiddler之类的工具进行验证）

好的，那么如何使用AJAX进行文件上传呢？AFAIK无法直接读取用户的文件系统（我认为

FileReader

只允许通过浏览器读取沙盒文件系统，但我在这里可能错了），因此我有两种方法：

• 使用隐藏iframe方法进行文件上载。用谷歌搜索你会发现很多信息
• 使用基于Flash的上传程序。最后，我们将对此进行详细介绍

至于使用Javascript获取文件在用户文件系统上的位置，请忘记它。这被认为是一个安全问题，许多浏览器在使用HTML输入文件标记时，仅在读取元素值时返回文件名。（除非您正在考虑使用闪存组件。在最后一点中有更多关于这方面的内容。）

现在来看进度条问题。当PHP脚本实际运行时，整个文件已上载到服务器。那么如何显示进度条呢？有几种（黑客）方式：

• 传统的方法是在服务器上创建CGI脚本来处理上传。优势是什么？CGI脚本可以在上传过程中运行，允许您检索上传的实际字节级进度。但这也要求您在服务器上的某个位置更新进度，您可以轮询（使用单独的AJAX请求）并在浏览器中向用户显示进度

• 另一种最常用的方法是使用基于flash的上传程序（请不要杀我StackOverflow社区）。是的，它仍然被大牌使用（我在Facebook上看你）。您将拥有的优势是，在服务器上不需要任何特殊脚本。基于Flash的客户端完全知道上载的字节数。此外，您还可以访问实际的文件路径字符串（注意may和string的使用），这在普通JS和HTML中是不可能公开的

---

你说你尝试了一些东西，但是你发布了零代码。这是普通的AJAX，没什么，得了吧，这一点对你的问题很重要。按照中的指导原则来回答。@ChristopherW，我做了，谢谢：-）@Jamesokpegorge为什么你不能使用jQuery插件呢？你不需要使用FileReader来分割文件或blob。只需使用slice函数即可。@raynocholus是的，但您需要文件读取器来读取文件。从何处读取文件？OP没有指定需要读取文件。据我们所知，OP有一个应用程序，允许用户从文件系统中选择一个文件，然后上传。这是最可能的情况，不需要使用FileReader。哇！很抱歉不知道这些东西的存在！：）@你当然可以。您应该熟悉XMLHttpRequest。以下是相关部分：。