Ajax：修訂版本之間的差異
出自六年制學程
（→HTTP 中的 Content-Type: multipart/form-data） |
（→HTTP 中的 Content-Type: multipart/form-data） |
||
| 第 31 行： | 第 31 行： | ||
#*Content-Disposition: form-data; name="欄名"<br/>空白行<br/>欄位內容 | #*Content-Disposition: form-data; name="欄名"<br/>空白行<br/>欄位內容 | ||
#*如果是檔案：<br/>Content-Disposition: form-data; name="欄名"; filename="檔名"<br/>Content-Type: text/plain<br/>空白行<br/>欄位內容(同時也是檔案內容) | #*如果是檔案：<br/>Content-Disposition: form-data; name="欄名"; filename="檔名"<br/>Content-Type: text/plain<br/>空白行<br/>欄位內容(同時也是檔案內容) | ||
| − | #*如果是圖片檔或是其他非文字檔(舉 png 圖檔為例)：<br/>Content-Disposition: form-data; name="file"; filename="image.png" | + | #*如果是圖片檔或是其他非文字檔(舉 png 圖檔為例)：<br/>Content-Disposition: form-data; name="file"; filename="image.png"<br/>Content-Type: image/png<br/>空白行<br/>圖檔二進位內容 |
| − | Content-Type: image/png<br/>空白行<br/>圖檔二進位內容 | + | |
==FormData 類別== | ==FormData 類別== | ||
2022年6月26日 (日) 16:34的修訂版本
目錄
HTTP 中的 Content-Type: multipart/form-data
常見的傳輸格式：
- Content-Type: application/json 代表請求內容是 JSON
- Content-Type: image/png 代表請求內容是圖片檔
- Content-Type: multipart/form-data 使用 (RFC7578) 規範，用一個請求傳送複數個資料格式，主要用於表單或實作檔案上傳。可以用 HTML 的 form 標籤指示 enctype='multipart/form-data' 屬性(配合 Submit)，或 JavaScript 的 FormData 類別(配合 onclick)。
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--
boundary 的作用與格式：
- 指示每個資料的界限在哪裡
- boundary 的格式：
- 開頭是兩個 hypen
- 總長度在 70 以內(不包含 hypen 本身)
- 只接受 ASCII 7bit
- 最後一個 boundary 則會再以兩個 hypen 當作結尾
- boundary 之下的處理：
- Content-Disposition: form-data; name="欄名"
空白行
欄位內容 - 如果是檔案：
Content-Disposition: form-data; name="欄名"; filename="檔名"
Content-Type: text/plain
空白行
欄位內容(同時也是檔案內容) - 如果是圖片檔或是其他非文字檔(舉 png 圖檔為例)：
Content-Disposition: form-data; name="file"; filename="image.png"
Content-Type: image/png
空白行
圖檔二進位內容
- Content-Disposition: form-data; name="欄名"
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';
}
?>
