-3

我開發一個無線文件傳輸應用（HTTP Web服務器），它包含有形式的網站上傳文件到服務器，即Android應用如何提交沒有頁面重新加載的文件選擇？

當我選擇生成是一個長的頭非常少的文件下面。

  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

當我選擇較大的文件，然後與作爲跟隨發生錯誤

控制檯錯誤：拒絕設置

部首產生

不安全頭「Content-長度」 637：（指數）

  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>

來源

2016-03-25 Bhavesh Patel

那麼，結合你從這些帖子得到的信息..？ – Andy

你能幫我嗎？我沒有正確理解。@ Andy –

是用你的路由「上傳」一個有效的URL嗎？另外，請發佈您在JavaScript控制檯或實際請求本身獲得的任何錯誤。「不工作」並不真正有用 – mhodges

這將偵聽文件輸入，當值改變時，意味着他們選擇了一個文件，它會發送一個帶有表單的ajax調用到你指定的url。這應該提交沒有頁面重新加載的表單。

更新以包括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>

來源

2016-03-25 15:21:42 mhodges

你應該嘗試尋找到AJAX參考。這樣可以通過向Web服務器請求頁面片段來更新部分頁面而無需重新加載。頁面片段隨後用於更新頁面上的某些元素。有關介紹，請參閱http://www.w3schools.com/ajax。

來源

2016-03-25 15:24:37 Dandorid

這不是一個答案，它是一個評論。 – mhodges

你可以看看這個解決方案（jQuery AJAX submit form）。需要JQuery，但很容易實現。

您可以嘗試只使用JavaScript和AJAX（Form submission using AJAX, PHP and Javascript），而不需要依賴於JQuery。這將是一個更復雜的構建過程，但如果您打算構建更復雜的表單提交功能，它是最好的方法。

來源

2016-03-25 15:41:57

如何提交沒有頁面重新加載的文件選擇？

回答

更新以包括jQuery的

相關問題