javascript - 文件上传作为一种形式工作正常，但作为 AJAX 查询返回 403-6ren

javascript - 文件上传作为一种形式工作正常，但作为 AJAX 查询返回 403

转载作者：行者123 更新时间：2023-11-29 20:59:27

我正在尝试使用 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>