0

我想为我的网站制作一个上传页面，以便异步上传文档，我尝试使用 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'];
?>
4

2 回答 2

1

首先，您的文件上传错误。文件上传要求您使用表单执行正确的 POST 请求，因为它需要enctype表单属性为multipart/form-data. 为什么？浏览器通过 POST 请求发送二进制文件数据，并通过 POST 请求对数据进行正确编码以在服务器上读取。任何其他方式，您只会在服务器上获取文件名（您可以使用 Fiddler 之类的工具进行验证）。

好的，那么如何使用 AJAX 进行文件上传？AFAIK不可能直接读取用户的文件系统（我认为FileReader只允许通过浏览器读取沙盒文件系统，但我可能在这里错了），所以IMO有两种方法可以去这里：

  • 使用隐藏的 iframe 方法进行文件上传。谷歌它你会发现很多信息。
  • 使用基于 Flash 的上传器。更多关于这在最后。

至于使用 Javascript 在用户文件系统上获取文件的位置，忘记它。这被认为是一个安全问题，许多浏览器在使用 HTML 输入文件标签时仅在读取元素值时返回文件名。（除非您正在考虑使用 Flash 组件。在最后一点会详细介绍。）

现在来到进度条问题。当您的 PHP 脚本实际运行时，整个文件已经上传到服务器。那么如何显示进度条呢？一些（hackish）方法：

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

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

于 2013-04-20T16:31:32.610 回答
-1

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

于 2013-04-20T15:09:29.280 回答