我想为我的网站制作一个上传页面,以便文档异步上传,我尝试使用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);
} */
}
以上是创建Object
的代码 button.onclick = function() {
send = createXMLHttpRequestObject();
frmUpload = document.getElementById("frmUpload");
file = document.getElementById("fileUpload");
processSending(send, frmUpload);
}
上面调用process方法发送文件时, 在服务器上我尝试回显文件路径,只显示名称,如此
<?php
echo $_GET['value'];
?>
答案 0 :(得分:1)
首先,您的文件上传错误。文件上传要求您使用表单执行正确的POST请求,因为它需要enctype
表单属性为multipart/form-data
。为什么?浏览器通过POST请求发送二进制文件数据,并通过POST请求正确编码数据,以便在服务器上读取。任何其他方式,你只需要在服务器上获取文件名(你可以使用像Fiddler这样的工具来验证它。)
好的,那么如何使用AJAX进行文件上传? AFAIK它无法直接读取用户的文件系统(我认为FileReader
只允许通过浏览器读取沙盒文件系统,但我可能在这里错了),所以IMO有2种方式:
对于使用Javascript在用户文件系统上获取文件的位置,请忘掉它。它被认为是安全问题,许多浏览器在使用HTML输入文件标记时仅在读取元素值时返回文件名。 (除非您考虑使用闪存组件。在最后一点上有更多内容。)
现在进入进度条问题。当您的PHP脚本实际运行时,整个文件已经上传到服务器。那么如何显示进度条呢?一些(hackish)方式:
旧学校的方法是在服务器上创建一个CGI脚本来处理上传。优势?在上传期间可以运行CGI脚本,允许您检索上载的实际字节级进度。但是,这还要求您更新服务器上可以轮询的某个位置的进度(使用单独的AJAX请求)并在浏览器中显示给用户。
另一种最常用的方法是使用基于闪存的上传器(请不要杀死我的StackOverflow社区)。是的它仍被大牌使用(我正在看着你的Facebook)。您将获得的优势是您不需要在服务器上使用任何特殊脚本。基于Flash的客户端完全了解上载的字节数。此外,您可能可以访问实际的文件路径字符串(请注意使用可能和字符串),这对于普通JS来说是不太公开的和HTML。
答案 1 :(得分:-1)
您可以使用FileReader
并将文件读入ArrayBuffer
或BinaryString
,然后使用多个请求发送例如1 MB大小的包。接收php脚本然后必须通过将每个接收到的部分附加到它来“重建”该文件。这也可以解决在服务器上回显文件路径的问题,因为您可以(并且必须)在写入之前决定将其保存在何处。