URLに画像ファイルを送信するには？

は、ここに私のコードです：URLに画像ファイルを送信するには？

function ajax_post(){ 
    // Create our XMLHttpRequest object 
    var hr = new XMLHttpRequest(); 
    // Create some variables we need to send to our PHP file 
    var url = "LiveUpdate.php"; 
    var sb = document.getElementById("LiveUpdate").value; 
    var FirstName = document.getElementById("FirstName").value; 
    var images = document.getElementById("images").value; 


    var vars = "update="+sb+"&FirstName="+FirstName+"&images="+images; 
    hr.open("POST", url, true); 
    // Set content type header information for sending url encoded variables in the request 
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    // Access the onreadystatechange event for the XMLHttpRequest object 
    hr.onreadystatechange = function() { 
     if(hr.readyState == 4 && hr.status == 200) { 
      var return_data = hr.responseText; 
      document.getElementById("success_insert").innerHTML = return_data; 
     } 
    } 
    // Send the data to PHP now... and wait for response to update the status div 
    hr.send(vars); // Actually execute the request 
    document.getElementById("success_insert").innerHTML = "processing..."; 
}

私はちょうど最初の名前、ミドルネーム、姓、および画像などのすべての基本的な詳細を送りたいです。問題は、名前、ミドルネーム、姓を送信できますが、イメージをLiveUpdate.phpエンドポイントに渡すことができないことです。

何が起こっているのですか？

出典

2016-11-12 Kenneth Suaverdez

最近のブラウザはすべて '（F12）に建設されたJavaScriptデバッガを持って'正常にデバッガをロードします。今すぐあなた自身のコードをデバッグすることができます – RiggsFolly

<input type="file">素子店.filesプロパティでユーザにより選択さFileオブジェクトのFileList、要素の.valueを文字列として設定されています。あなたは、multipart/form-dataにContent-Typeを設定FormData()を使用し、文字列キーを照会する要素のnameプロパティを設定することができ、<form>要素の.valueまたは.filesプロパティがFormDataオブジェクトの値に設定されます。 <form>の

コールevent.preventDefault()submitでイベント、FormDataオブジェクトにキーと値のペアを設定するFormData()コンストラクタへform参照を渡します。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 

 
    <form id="form1" name="form1" enctype="multipart/form-data"> 
 
    <div> 
 
     First Name 
 
     <input type="text" name="FirstName" id="FirstName"> 
 
     <br>Live Update 
 
     <input type="text" name="LiveUpdate" id="LiveUpdate"> 
 
     <br>Image 
 
     <input type="file" id="images" name="images" accept="image/*"> 
 
    </div> 
 
    <input type="submit"> 
 
    </form> 
 
    <script> 
 
    var form = document.getElementById("form1"); 
 

 
    form.onsubmit = function(e) { 
 
     e.preventDefault(); 
 

 
     function ajax_post(form) { 
 
     // Create our XMLHttpRequest object 
 
     var hr = new XMLHttpRequest(); 
 
     // Create some variables we need to send to our PHP file 
 
     var url = "/dev/null"; 
 
     hr.open("POST", url, true); 
 
     // Set content type header information for sending url encoded variables in the request 
 
     hr.setRequestHeader("Content-type", "multipart/form-data"); 
 
     // Access the onreadystatechange event for the XMLHttpRequest object 
 
     hr.onreadystatechange = function() { 
 
      if (hr.readyState == 4 && hr.status == 200) { 
 
       var return_data = hr.responseText; 
 
       //document.getElementById("success_insert").innerHTML = return_data; 
 
      } 
 
      } 
 
      // Send the data to PHP now... and wait for response to update the status div 
 
     hr.send(new FormData(form)); // Actually execute the request 
 
     // document.getElementById("success_insert").innerHTML = "processing..."; 
 
     } 
 
     ajax_post(this) 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-11-12 03:41:08 guest271314

私はで質問がありますhr.send（新しいFormData（document.querySelector（ "form"））））; 「フォーム」はどこで手に入りましたか？今のところ問題があるのでこれはエラーです。警告：multipart/form-data POSTデータの境界線が不明（0行目） –

はい、 'sb'、' Firstname'、 'images'の親要素である'

@KennethSuaverdez何が問題なのかわかりません。 '.send（）'の前に 'FormData（）'の呼び出しを更新しました。 – guest271314

URLに画像ファイルを送信するには？

答えて

関連する問題