web-dev-qa-db-ja.com

Ajax POST jQueryおよびFormDataを介したリクエスト-$ _ POSTはPHP

JQueryとFormDataを使用してajax経由でサーバーに画像をアップロードしたいと思います。

私のjQueryコードは次のとおりです

var formData = new FormData("form")[0];
  var fileName = $("#InputLogo")[0].files[0].name;

  $.ajax ( {
      url : 'upload.php',
      type : 'POST',
      data : { "data" : formData, "fileName" : fileName },
      processData : false,
      success : function(data) {
          console.log(data);
          alert(data);
      }
  });

このコードは、ユーザーがアップロードする新しいファイルを選択したときに呼び出されます。

私のサーバーバックエンドはPHPであり、次のようにリクエストを処理します

$data = $_POST['data'];
$fileName = $_POST['fileName'];
$fp = fopen('/img/'.$fileName, 'w');
fwrite($fp, $data);
fclose($fp);
$returnData = array("data" => $data);
print_r($_POST);

POSTリクエストは発生しますが、$ _ POSTは空のままです。

解決策を探してみましたが、正確な解決策が見つかりませんでした。

任意の提案をいただければ幸いです。

編集：これがHTMLのフォームです

<form id=card-form" method="post" action="" >
      <div class="form-group">
    <label for="InputName">Name of the Company</label>
    <input type="text" class="form-control" id="InputName" placeholder="Enter a name">
    </div>
    <div class="form-group">
    <label for="InputEmail">Email</label>
    <input type="email" class="form-control" id="InputEmail" placeholder="Enter email">
    </div>
    <div class="form-group">
    <label for="InputLogo">Choose a company logo</label>
    <input type="file" id="InputLogo" accept="image/*">
    <p class="help-block">For good visibility, please limit the image to 200 x 200 px</p>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
javascriptphpjqueryajaxform-data
8
Pankaj Bhambhani

FormData()コンストラクター はセレクターエンジンではなく、配列のようなコレクションを表していないため、_var formData_はundefinedと等しい可能性があります。 。

これを使用するには、最初に_<form>_を見つけて、コンストラクターに渡す必要があります。

_var form = $('form')[0];
var formData = new FormData(form);
_

_<input type="file">_が_<form>_内にある場合は、すでにformDataに含まれているはずです。ただし、そうでない場合は、次のこともできます .append() it：

_var inputLogo = $("#InputLogo")[0];
formData.append(inputLogo.name, inputLogo.files[0]);
_

そして、送信されるformDataとしてdataを設定し、jQueryにcontentTypeを想定しないように指示します。

_// ...
    data : formData,
    contentType : false,
    processData : false,
// ...
_

次に、fileSizeがPHPの _$_FILES_コレクション で使用可能になります。

_$fileName = $_FILES['inputLogo']['name'];
_
14
Jonathan Lonowski

これは古い投稿だと思いますが、似たような問題を自分で解決しようとしたときに出くわしましたが、どの返信もこの問題を指摘していなかったので、他の誰かが同じ中に自分を見つけた場合に備えて返信を投稿しています状況。

別のStackOverflowの投稿に記載されているように、次のことがわかります。

入力タグに名前がない場合でもフォームデータは転送されますか？

ファイル入力要素に空でない名前属性がない場合、その要素からのデータはリクエストで送信されません。

したがって、入力要素は次のとおりです。

<input type="file" id="InputLogo" accept="image/*">

する必要があります：

<input type="file" id="InputLogo" accept="image/*" name="yourfieldnamehere">

または、ファイルはフォームデータとともに送信されません。

8
user3460576

私も次の方法でたくさん試しました：

var formData = new FormData("form")[0];
var formData = new FormData("form");
var formData = new FormData($('form-id'));
var formData = new FormData(this);

それらのどれも私のために働いていませんでした。しかし、ついに、私はelementByIdを取得するJavaScriptの方法を使用し、それは完全に機能しました。

formdata = new FormData(document.getElementById('form_id'))

通常、リクエストヘッダーには、次のような暗号化されたテキストがあります。multipart/ form-data;境界= ---- WebKitFormBoundaryUuVvGDydAdTf3Bmp

また、フォームデータにアラートを送信しようとすると、[オブジェクトフォームデータ]が表示されます。これは、formdata関数が正常に機能していることを意味します。

$ _POST、$ _ REQUEST、または$ _FILESの値を返し、それが空白の場合、formdataは指定されたフォーム要素にアクセスできないことを意味します。したがって、最初にformdataがform要素にアクセスできるかどうかを確認してから、他の可能性を試す必要があります。

5
Lawrence Gandhar

ajaxでformDataを使用する際に考慮する必要のある問題はほとんどありません。また、FormDataのappend()メソッドを使用してFormDataにデータを追加できます。

これを試して..

 var formData = new FormData("form")[0];
 formData.append("fileName",$("#InputLogo")[0].files[0].name);

 $.ajax ( {
   url : 'upload.php',
   type : 'POST',
   data : formData ,
   processData : false,
   processData: false,  // tell jQuery not to process the data
   contentType: false   // tell jQuery not to set contentType
   success : function(data) {
      console.log(data);
      alert(data);
   }
});

参照

2
bipen

1つの問題は、HTML5のいくつかの利点を使用しない限り、Ajaxを介したファイルのアップロードが機能しないことです。

これはそれを説明するgooの投稿です： ファイルを非同期にアップロードするにはどうすればよいですか？

0
Markus Kottländer