ページリロードなしでファイル選択フォームを送信するにはどうすればよいですか？

Question

私は無線ファイル転送アプリケーション（HTTP Webサーバー）を開発しています。サーバーにファイルをアップロードするフォームのWebサイトが含まれています。つまり、アンドロイドアプリケーション

非常に小さいサイズのファイルを選択すると、以下。

  POST /?Upload HTTP/1.1 
      Host: 192.168.0.101:4567 
      Connection: keep-alive 
      Content-Length: 2968 
      Pragma: no-cache 
      Cache-Control: no-cache 
      Origin: http://192.168.0.101:4567 
      User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36 
      Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryT0t2jgS72DnsVZRX 
      Accept: */* 
      DNT: 1 
      Referer: http://192.168.0.101:4567/ 
      Accept-Encoding: gzip, deflate 
      Accept-Language: en-US,en;q=0.8 

そして、私は、より大きなファイルを選択して従うようにエラーが発生した場合

コンソールエラー：（インデックス）：637ヘッダー

生成

危険ヘッダの "Content-Length" を設定する拒否

  Provisional headers are shown 
      Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO 
      Origin:http://192.168.0.101:4567 
      Referer:http://192.168.0.101:4567/ 
      User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36 

      Provisional headers are shown 
      Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO 
      Origin:http://192.168.0.101:4567 
      Referer:http://192.168.0.101:4567/ 
      User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36 

      Provisional headers are shown 
      Content-Type:multipart/form-data; boundary=----WebKitFormBoundary0tFAb8kt90pwbuFO 
      Origin:http://192.168.0.101:4567 
      Referer:http://192.168.0.101:4567/ 
      User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36 

コード：

  <form id="uploadForm" method="post" enctype="multipart/form-data"> 
       <input id="uploadPath" type="hidden" name="path"> 
       <button class="file-upload"> 
        <input id="fileUpload" onchange="uploadFile()" type="file" class="file-input">Upload 
       </button> 
      </form> 

      <script> 

      function uploadFile() {   
       var form = document.getElementById('uploadForm'); 
       var path = form.elements.namedItem("path").value 
       var file = document.getElementById('fileUpload').files[0]; 
       var formData = new FormData(form); 

       formData.append('file', file); 
       var http = new XMLHttpRequest(); 
       http.open("POST", '/?Upload', true); 
       http.setRequestHeader("Content-length", file.size); 
       http.onreadystatechange = function() { //Call a function when the state changes. 
        if (http.readyState == 4 && http.status == 200) { 
         alert(http.responseText); 
        } 
       } 

       http.send(formData); 
       form.reset(); 
       form.elements.namedItem("path").value = path; 

      } 
      </script> 

Answer 1

これはファイル入力をリッスンし、値が変更されるとファイルを選択したことを意味し、指定したURLにフォームとともにajax呼び出しを送信します。これは、ページを再読み込みせずにフォームを送信する必要があります。

あなたはおそらくAJAXに探してみてくださいjQueryの

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 
<script> 
$(function() { 
    $("#fileUpload").on("change", function() { 
    $.ajax({ 
     url: "upload.php", 
     method: "POST", 
     data: $("form").serialize(), 
     success: function (data) { 
     // success callback 
     } 
    }); 
    }); 
}); 
</script> 

Answer 2

への参照を含むように更新します。これにより、Webサーバーからページフラグメントを要求することで、リロードせずにページの一部を更新することができます。ページフラグメントは、ページの特定の要素を更新するために使用されます。イントロについては、http://www.w3schools.com/ajaxを参照してください。

Answer 3

この解決策を確認することができます（jQuery AJAX submit form）。 JQueryが必要ですが実装は簡単です。

JavascriptとAJAX（Form submission using AJAX, PHP and Javascript）を使用するだけで、JQueryに依存する必要はありません。これはビルドするのがより複雑なプロセスですが、より複雑なフォーム提出機能を構築する予定の場合は、これが最善の方法です。