HTML5和JS上傳圖片是開發Web應用程序中非常常見的功能，其基本原理是利用HTML5提供的File API和通過JavaScript實現的數據交換機制，實現圖片上傳功能。下面是一個HTML5和JS上傳圖片的示例代碼：
HTML5 和 JS 上傳圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 and Javascript 圖片上傳示例</title>
</head>
<body>
<form id="uploadForm">
<input type="file" id="fileInput" name="fileInput">
<button type="submit" id="uploadBtn">上傳</button>
</form>
<script type="text/javascript">
var uploadForm = document.getElementById('uploadForm');
var fileInput = document.getElementById('fileInput');
var uploadBtn = document.getElementById('uploadBtn');
uploadBtn.onclick = function () {
var formData = new FormData();
formData.append('file', fileInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
alert(xhr.responseText);
} else {
alert('錯誤：' + xhr.status);
}
}
};
xhr.open('POST', 'upload.php', true);
xhr.send(formData);
}
</script>
</body>
</html>在上述代碼中，我們首先創建了一個表單（uploadForm），其中包含了一個文件輸入元素（fileInput）和一個提交按鈕（uploadBtn）。然后我們在JS代碼中為上傳按鈕添加了一個點擊事件（uploadBtn.onclick），當用戶點擊該按鈕時，我們會創建一個FormData對象，通過append()方法將文件數據添加到其中，然后通過XMLHttpRequest對象向服務端發送一個POST請求，上傳文件。
需要注意的是，我們要將表單的enctype屬性設置為multipart/form-data，這樣才能將文件數據正確的上傳至服務器端。
總而言之，HTML5和JS的圖片上傳功能非常簡單且實用，它能滿足我們在開發Web應用程序中的各種需求。