Ajax：修訂版本之間的差異
出自六年制學程
（新頁面: ==檔案上傳== ===前台程式=== <pre><!DOCTYPE html> <html> <head> <title> Ajax JavaScript File Upload Example </title> </head> <body> <!-- HTML5 Input Form Elements --...） |
|||
| 第 1 行： | 第 1 行： | ||
| + | ==FormData 類別== | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | ==資料後送== | ||
| + | ===etable 舊版=== | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
==檔案上傳== | ==檔案上傳== | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
===前台程式=== | ===前台程式=== | ||
<pre><!DOCTYPE html> | <pre><!DOCTYPE html> | ||
2022年6月26日 (日) 09:46的修訂版本
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';
}
?>
