Question

我尝试使用AJAX进行文件上传，但我收到403服务器响应...但是当我做非AJAX请求时，它工作正常。这是我的HTML：

＆＃13;

<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>

＆＃13;

我的php文件（testimportfiles.php）就是这样：

＆＃13;

<?php

header('Content-Type: text/xml');
print("<?xml version=\"1.0\" encoding=\"UTF-8\"?><root>");
print("<result>0</result>");
print("</root>");

＆＃13;

第二种方法工作正常，但第一种方法从服务器返回403错误。这是我服务器的配置问题，还是我在代码中做错了什么？

谢谢！

编辑：我没有回答这个问题，以防更好的方式，但我已经使用AjaxFileUpload.js解决了我的问题，https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en通过动态创建表单来模仿AJAX请求并将响应定位到动态创建的iFrame。然后从iFrame复制服务器响应。

我仍然很好奇是否可以进行真正的AJAX交易（即，某些内容并不需要浏览器窗口或iFrame作为服务器响应的目标），但这对我来说很有用。目前的项目。

Answer 1

当我尝试你的代码时，我得到两个方法的结果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>

Answer 2

我认为问题在于服务器上的PHP文件，使用此函数代码可以在我这边工作。

function importFileAJAX() {
    fileData = $('#importfileAJAX').prop('files')[0];
    formData = new FormData();
    formData.append('file', fileData);
    $.ajax({
        url: "testimportfiles.php",
        data: formData,
        type: 'POST',
        contentType: false,
        processData: false,
    }).done(function (xml) {
        console.log(xml);
       // alert( $(xml).find('result').text());
    }).fail(function (jqXHR, errorText, exceptionText) {
        alert("Error: " + jqXHR.responseText);
    });
}

然后在testimportfiles.php

中

$file = $_FILES['file']['name'];
$tmp_file = $_FILES['file']['tmp_name'];

if (move_uploaded_file($tmp_file, "dir/to/upload/$file")) {
    echo "Success";
}else {
    echo "error";
}

Answer 3

感谢大家，尤其是JealPaul98和julekgwa，感谢他们在服务器上运行的答案......使用他们的代码我能够回溯并发现我在最初的AJAX调用中需要contentType: false。所以我的importFileAJAX函数变成了：

function importFileAJAX() {
  fileData = $('#importfileAJAX').prop('files')[0];
  formData = new FormData();
  formData.append('file', fileData);
  $.ajax({
    method: 'POST',
    url: "testimportfiles.php",
    data: formData,
    contentType: false,
    processData: false
  }).done(function(xml) {
    alert($(xml).find('result').text());
  }).fail(function(jqXHR, errorText, exceptionText) {
    alert("Error: " + jqXHR.responseText);
  });
}

文件上传作为表单工作正常，但随着AJAX查询返回403

3 个答案: