Dosyada form nasıl gönderilir Sayfa yeniden yüklemeden seçilmeli?

Question

Bir kablosuz dosya transferi uygulaması (HTTP Web Sunucusu) geliştiriyorum

, ben gibidir oluşturulan çok daha az boyutta başlığının bir dosya seçtiğinizde android app

yani sunucuya dosya yüklemek için bir form ile bir web sitesi içeriyor altında.

  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 

Ve sonra daha büyük bir dosya seçin ve uygulayın gibi hata oluştuğunda

konsol hatası: (endeks): 637 Başlık

oluşturulan

güvensiz başlık "Content-uzunluk" set reddetti

  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 

Kodu:

  <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

Bu, dosya girişini dinleyecektir ve değer değiştiğinde, bir dosya seçtikleri anlamına gelir, sizin belirttiğiniz URL'ye formunuzla bir ajax çağrısı gönderir. Bu, sayfanın yeniden yüklenmesi olmadan formu göndermelidir.

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

Muhtemelen AJAX bakarak denemelisiniz referans içerecek şekilde güncellendi. Bu, web sunucusundan sayfa fragmanları isteyerek sayfanızın bir bölümünü yeniden yükleme olmadan güncellemenize olanak tanır. Sayfa parçaları, sayfanızdaki belirli öğeleri güncellemek için kullanılır. Bir giriş için bkz. http://www.w3schools.com/ajax.

Answer 3

Bu çözümü inceleyebilirsiniz (jQuery AJAX submit form). JQuery gerektirir, ancak uygulamak kolaydır.

Sadece JQuery'ye bağımlı olmak zorunda kalmadan Javascript ve AJAX (Form submission using AJAX, PHP and Javascript) kullanmayı deneyebilirsiniz. Bu, daha karmaşık bir form sunma özellikleri oluşturmayı planlıyorsanız, en karmaşık yöntemdir.