4.3 傳送檔案資料
使用 fetch 語法傳檔
fetch 語法無法做「檔案上傳進度」的監聽。
建立 fetch_upload_file.html ，貼以下的原始碼，執行看看：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title>使用 fetch 來將檔案上傳</title>
</head>
<body>
<h1>使用 fetch 語法</h1>
<input type="file" id="the_file" accept="image/*">
<div class="upload_status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#the_file").on("change", function(){
// here
//console.log(this.files);
let form_data = new FormData();
form_data.append("the_file", this.files[0]);
$("div.upload_status").html("檔案傳送中…");
// 使用 fetch 語法傳送檔案
fetch("https://notes.webmix.cc/html5_tutorial/file/file_receive.php", {
method: "POST",
body: form_data
}).then(res => res.json()).then(data => {
console.log(data);
$("div.upload_status").html("檔案傳送完成");
$("div.upload_status").append(`<img src="${data.file_path}" style="width: 200px;">`);
});
});
/*
$("#the_file").on("change", async function(){
// here
//console.log(this.files);
let form_data = new FormData();
form_data.append("the_file", this.files[0]);
$("div.upload_status").html("檔案傳送中…");
// 使用 fetch 語法傳送檔案
let res = await fetch("https://notes.webmix.cc/html5_tutorial/file/file_receive.php", {
method: "POST",
body: form_data
});
let data = await res.json();
console.log(data);
$("div.upload_status").html("檔案傳送完成");
$("div.upload_status").append(`<img src="${data.file_path}" style="width: 200px;">`);
});
*/
</script>
</body>
</html>Last updated