Ajax:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
HTTP 中的 multipart/form-data Content-Type
HTTP 中的 multipart/form-data Content-Type
第 4 行: 第 4 行:
 
#Content-Type: image/png 代表請求內容是圖片檔
 
#Content-Type: image/png 代表請求內容是圖片檔
 
#Content-Type: multipart/form-data 使用 (RFC7578) 規範,用一個請求傳送複數個資料格式,主要用於表單或實作檔案上傳。可以用 HTML 的 form 標籤指示 enctype='multipart/form-data' 屬性(配合 Submit),或 JavaScript 的 FormData 類別(配合 onclick)。
 
#Content-Type: multipart/form-data 使用 (RFC7578) 規範,用一個請求傳送複數個資料格式,主要用於表單或實作檔案上傳。可以用 HTML 的 form 標籤指示 enctype='multipart/form-data' 屬性(配合 Submit),或 JavaScript 的 FormData 類別(配合 onclick)。
 +
以下先看一個 multipart/form-data 瀏覽器發送一個 POST 請求:<pre>POST 目的地 HTTP/1.1
 +
Host: localhost:3000
 +
 +
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryFYGn56LlBDLnAkfd
 +
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36
 +
 +
------WebKitFormBoundaryFYGn56LlBDLnAkfd
 +
Content-Disposition: form-data; name="name"
 +
 +
Test
 +
------WebKitFormBoundaryFYGn56LlBDLnAkfd
 +
Content-Disposition: form-data; name="file"; filename="text.txt"
 +
Content-Type: text/plain
 +
 +
Hello World
 +
------WebKitFormBoundaryFYGn56LlBDLnAkfd--</pre>
  
 
==FormData 類別==
 
==FormData 類別==

2022年6月26日 (日) 11:49的修訂版本

HTTP 中的 multipart/form-data Content-Type

常見的傳輸格式:

  1. Content-Type: application/json 代表請求內容是 JSON
  2. Content-Type: image/png 代表請求內容是圖片檔
  3. Content-Type: multipart/form-data 使用 (RFC7578) 規範,用一個請求傳送複數個資料格式,主要用於表單或實作檔案上傳。可以用 HTML 的 form 標籤指示 enctype='multipart/form-data' 屬性(配合 Submit),或 JavaScript 的 FormData 類別(配合 onclick)。
以下先看一個 multipart/form-data 瀏覽器發送一個 POST 請求:
POST 目的地 HTTP/1.1
Host: localhost:3000

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryFYGn56LlBDLnAkfd
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36

------WebKitFormBoundaryFYGn56LlBDLnAkfd
Content-Disposition: form-data; name="name"

Test
------WebKitFormBoundaryFYGn56LlBDLnAkfd
Content-Disposition: form-data; name="file"; filename="text.txt"
Content-Type: text/plain

Hello World
------WebKitFormBoundaryFYGn56LlBDLnAkfd--

FormData 類別

資料後送

etable 舊版

檔案上傳

前台程式

<!DOCTYPE html> 
<html> 
 <head> 
  <title> Ajax JavaScript File Upload Example </title> 
 </head> 
 <body>
  <!-- HTML5 Input Form Elements -->
  <input id="fileupload" type="file" name="formData" /> 
  <button id="upload-button" onclick="uploadFile()"> Upload </button>

  <!-- Ajax JavaScript File Upload Logic -->
  <script>
  async function uploadFile() {
  let formData = new FormData(); 
  formData.append("file", fileupload.files[0]);
  await fetch('./upload.php', {
    method: "POST", 
    body: formData
  }); 
  alert('The file has been uploaded successfully.');
  }
  </script>

 </body> 
</html>

對應的後台程式 upload.php

<?php

/* Get the name of the uploaded file */
$filename = $_FILES['file']['name'];

/* Choose where to save the uploaded file */
$location = "./upload/".$filename;

/* Save the uploaded file to the local filesystem */
if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) { 
  echo 'Success'; 
} else { 
  echo 'Failure'; 
}

?>