我正在尝试使用 AJAX 进行文件上传，但收到 403 服务器响应...但是当我执行与非 AJAX 请求相同的操作时，它工作正常。这是我的 HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type="text/javascript">
function importFileAJAX() {
fileData = $('#importfileAJAX').prop('files')[0];
formData = new FormData();
formData.append('file', fileData);
$.ajax({
method: "POST",
url: "testimportfiles.php",
data: formData,
processData: false
}).done(function(xml) {
alert( $(xml).find('result').text());
}).fail(function(jqXHR, errorText, exceptionText) {
alert("Error: " + jqXHR.responseText);
});
}
</script>
</head>
<body>
AJAX: <input id="importfileAJAX" type="file" />
<button onclick="importFileAJAX();">Import Files</button>
<hr />
<form action="testimportfiles.php" method="post" enctype="multipart/form-data">
Non-AJAX: <input type="file" name="file" id="file">
<input type="submit" value="Import Files" name="submit">
</form>
</body>
</html>我的 php 文件 (testimportfiles.php) 就是这样:
<?php
header('Content-Type: text/xml');
print("<?xml version=\"1.0\" encoding=\"UTF-8\"?><root>");
print("<result>0</result>");
print("</root>");第二种方法工作正常，但第一种方法从服务器返回 403 错误。这是我的服务器的配置问题，还是我只是在代码中做错了什么？
谢谢!
编辑:我没有回答这个问题，以防有更好的方法，但我已经使用 AjaxFileUpload.js 解决了我的问题，它通过动态创建表单并将响应定位到动态创建的 iFrame 来模拟 AJAX 请求。然后从 iFrame 复制服务器响应。
我仍然很好奇是否可以实现真正的 AJAX 事务(即不需要浏览器窗口或 iFrame 作为服务器响应目标的事务)，但这对我当前的项目来说是可行的。
最佳答案
当我尝试你的代码时，两种方法的结果都是 0，所以这肯定是服务器端的问题(可能是也可能不是权限问题)....但这就是我用来上传文件的方法。它可以根据您的需要进行调整，但这是一种方法。我将努力看看是否可以使用您的代码获得不同的方法。
<button type="button" onClick="return uploadFile();">Post Status</button>
function _(el) {
return document.getElementById(el);
// I honestly don't know if these 3 lines of code are
//necessary but idk what will happen if I delete them so....
}
function uploadFile() {
var file = _("filetoupload_id").files[0];
var formdata = new FormData();
formdata.append("file12", file);
var ajax = new XMLHttpRequest();
ajax.open("POST", "path/to/upload.php");
ajax.send(formdata);
}
更新我尝试了下面的代码，它也可以在我的服务器上运行......
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
AJAX: <input id="file1" type="file" />
<button onclick="return importFileAJAX();">Import Files</button>
<hr />
<form action="tupload.php" method="post" enctype="multipart/form-data">
Non-AJAX: <input type="file" name="file1" id="file1">
<input type="submit" value="Import Files" name="submit">
</form>
<script type="text/javascript">
function _(el) {
return document.getElementById(el);
}
function importFileAJAX() {
var file = _("file1").files[0];
var formdata = new FormData();
formdata.append("file1", file);
$.ajax({
method: "POST",
url: "tupload.php",
data: formdata,
processData: false
}).done(function(xml) {
alert( $(xml).find('result').text());
}).fail(function(jqXHR, errorText, exceptionText) {
alert("Error: ");
});
}
</script>
</body>
</html>
关于javascript - 文件上传作为表单工作正常，但作为 AJAX 查询返回 403，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47338217/