サーバー側のPOSTメソッドからのtype = "file"へのアクセス

Question

サーバー側のtype = "file"入力へのアクセス方法を理解するのが少し難しいです。以下は私が使用しているコードです。私はAJAXを使用しています。なぜなら私のWebアプリケーションをリフレッシュする必要がないようにするために、私はフォームを提出するために多少ラウンドアバウトの方法を使用しています。

マイHTML：

<form id="updateProfileImageForm" enctype="multipart/form-data"> 
      <div class="updateProfileImageContainer"> 
       <img src="images/profile/generic.png" class="updateProfileImage"> 
       <div class="updateProfileImageOverlay" onclick="changeImageToUpload()"> 
       <div class="updateProfileImageOverlayText">Upload new image</div> 
       </div> 
       <input type="file" id="imageToUpload" name="image" style="display: none;" onChange="$(this).closest('form').trigger('submit');"></input> 
      </div> 
      </form> 

マイJS：

function changeImageToUpload() { 
    $('#imageToUpload').trigger('click'); 
}  

$('#updateProfileImageForm').submit(function(e) { 
     e.preventDefault(); 
     var form_data = new FormData(this); 

     $.ajax({ 
     type: 'POST', 
     url: '/changeProfile', 
     data: form_data, 
     processData: false, 
     success: function(response) { 
      if(response.message != null) { 
      alert(response.message); 
      } else { 
      // Change profile image displayed 
      $('.updateProfileImage').attr("src", response.newProfileImage); 
      alert('Profile picture successfully updated! Refresh your browser to update your window!'); 
      } 
     } 
     }) 
    }); 

私のサーバーのPHP：$ _FILESの

if (isset($_FILES['image'])) { 
     $image = $_FILES['image']; 
    } 

のvar_dumpは$ _POSTショーでのvar_dumpながら、空の配列を示しています多くの情報（私は自分のデータファイルと推測しています）。しかし、$ _POSTまたは$ _FILESのいずれか（$ _POST ['image']または$ _FILES ['image']のいずれか）の 'image'プロパティにアクセスすると、私に "未定義のインデックス"または "未定義の変数"が与えられます。

君たちに私を教育するほど親切のようになります。

1. $ _POSTと$ _FILESの違いは何ですか？

2. この場合、どのようにファイルにアクセスする必要がありますか？

ありがとう！

Answer 1

あなたのAjaxのリクエストで必要な設定オプションが欠落している、あなたは偽

$.ajax({ 
    type: 'POST', 
    url: '/changeProfile', 
    data: form_data, 
    processData: false, 
    contentType: false, 
    success: function(response) { 
     if(response.message != null) { 
     alert(response.message); 
     } else { 
     // Change profile image displayed 
     $('.updateProfileImage').attr("src", response.newProfileImage); 
     alert('Profile picture successfully updated! Refresh your browser to update your window!'); 
     } 
    } 
    }) 

jQuery.ajaxは、アプリケーション/ x軸に、デフォルトでは、コンテンツタイプを設定するのcontentTypeを設定する必要がありますwww-form-urlencodedがFormDataオブジェクトに対して正しくない場合、falseに設定すると、それは基礎となるXMLHTTPRequestオブジェクトによって正しく設定されます。

Answer 2

背後にあるアイデア。 ファイルをPHPのポストとして使用するのではなく、イメージをbase64に変換し、phpのajaxを使用してその文字列を受け取るだけです。

Refer to this URL