ファイルアップロードはフォームとしてはうまく動作しますが、AJAXクエリーが返されると、403

私はAJAXを使用してファイルをアップロードしようとしていますが、私は403サーバーレスポンスを取得します...しかし、 AJAXリクエスト、それは正常に動作します。ここに私のHTMLは次のとおりです。ファイルアップロードはフォームとしてはうまく動作しますが、AJAXクエリーが返されると、403

<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>");

第2の方法はうまく動作しますが、最初のメソッドはサーバーから403エラーを返します。これは私のサーバーの設定上の問題ですか、私は自分のコードで間違ったことをしていますか？

ありがとうございます！

編集：私はそこに良い方法はありますが、私は動的にフォームを作成し、動的に作成されたiFrameに対する応答を標的とすることによって、AJAX要求を模倣し、AjaxFileUpload.jsを使用して私の問題を解決してきた場合には未回答この質問を残しています。その後、サーバーの応答がiFrameからコピーされます。

真のAJAXトランザクションが可能な場合（つまり、ブラウザウィンドウやiFrameをサーバレスポンスのターゲットとして使用しない場合）、これは私の現在のプロジェクトではうまくいくでしょうか。

出典

2017-11-16 TobyRush

あなたはどんな違いを探すために他のフォームの呼び出しにAJAX呼び出しを比較するために、あなたのブラウザのネットワークタブ内の要求で見たことがありますか？ – Taplar

フォームにenctypeが設定されていることにも気付きました。ajax呼び出しのデフォルトのcontentTypeはapplication/x-www-form-urlencodedです。 charset = UTF-8 – Taplar

@Tobyは 'バックエンド'で 'クッキー 'で'認証'していますか？ –

おかげでその後

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); 
    }); 
}

...私は後戻りすることができたと私は必要なことを発見contentType: false私の最初のAJAX呼び出しで。だから私の作業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); 
 
    }); 
 
}

出典

2017-11-20 19:55:56 TobyRush

私はあなたのコードを試してみると、どちらの方法でも結果が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); 
}

UPDATE私は以下のコードを試してみました、それはまた、私のサーバー上で働いていた......

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

出典

2017-11-20 18:14:55 JeanPaul98

これをチェックしていただきありがとうございます。私は自分のサーバー上であなたのコードを試しましたが、私はまだ禁止されたエラーを取得していますので、あなたのことは自分のサーバーに特有のものだと思います。セキュリティ設定については、私のISP（cPanelを介してApacheサーバーを実行している）に確認します。ありがとう！ – TobyRush

あなたはローカルに、あるいはサーバーにアップロードしようとしていますか、あなたが私の尋ねに気にしないなら、あなたがホスティングしているサーバーを使ってみようとしていますか？ – JeanPaul98

私はサーバーにアップロードしようとしています。私のアカウントはWestHost（westhost.com）です。 – TobyRush

私はこの問題は、上のPHPファイルであると思いますサーバー、この関数を使用してコードは私の側で動作します。自分のコードを使用してすべての人、特にJealPaul98とそのサーバー上で働いていた答えをjulekgwaにご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"; 
}

出典

2017-11-20 19:02:08 julekgwa

興味深いことに、あなたのコードを試してみましたが、それはうまくいきました。そして、私は自分のコードに向かってバックアップを始め、何が修正されたかを見ていきました。私が欠けていたのは、最初のajaxオブジェクトの 'contentType：false'でした。 – TobyRush

ファイルアップロードはフォームとしてはうまく動作しますが、AJAXクエリーが返されると、403

答えて

関連する問題