HTML5圖片上傳源代碼 HTML5 是近年來Web 開發中最受歡迎的技術之一。隨著Web2.0 和分享經濟的興起，用戶需要更加輕松地上傳圖片，以便分享和交流。在這篇文章中，我們將介紹如何使用HTML5實現圖片上傳功能。 要實現圖片上傳功能，需要輸入 type="file" 的 input 元素。此外，我們還可以使用accept 屬性，僅允許上傳特定類型的文件。下面是一個基本的HTML5圖片上傳表單的代碼：

<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
<label for="file-input">選擇圖片:</label>
<input id="file-input" type="file" accept="image/*">
<button type="submit">上傳圖片</button>
</form>

上面的代碼創建了一個包含一個label 元素和一個input 元素的表單，用于上傳圖片。label 元素用于說明這個表單用于上傳圖片， input元素使用 accept 屬性來限制文件只能是圖片。 在 HTML5 中，我們可以使用 FileReader API 在客戶端將圖像轉換為 base64 編碼的字符串。這個API非常強大，可以讀取文件并返回它的內容。我們可以使用以下 JavaScript 代碼來讀取文件：

var reader = new FileReader();
reader.onload = function(event) {
var dataUrl = event.target.result;
// do something with the dataUrl
};
reader.readAsDataURL(file);

以上代碼創建了一個新的 FileReader 對象，然后使用它的 onload 方法來處理讀取到的文件。此后，將文件保存在 dataUrl 變量中。 最后，我們需要將圖像上傳到服務器。我們可以使用普通的 AJAX請求，或者使用HTML5中的 FormData對象。這是一個類似于字典的對象，其中包含了一組鍵值對，可以用于向服務器發送數據。以下是一個使用 FormData對象發送圖像的代碼：

var formData = new FormData();
formData.append('file', file, 'image.png');
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function(event) {
if (xhr.status == 200) {
// upload successful
} else {
// upload failed
}
};
xhr.send(formData);

以上代碼創建了一個新的 FormData 對象，并在其中添加了文件。之后，我們創建了一個 AJAX 請求，將數據發送給服務器。 總之，HTML5 提供了一種簡單的方法來實現圖片上傳功能。我們可以使用input 元素， FileReader API 和 FormData 對象來輕松地實現這一目標。