關于HTML中上傳圖片

值得注意的是：當一個表單里面包含這個上傳元素的時候，表單的enctype必須指定為multipart/form-data,method必須指定為post，瀏覽器才會認識并正確執行。

但是還有一點，瀏覽器只允許用戶點擊<input type="file">來選擇本地文件，用JavaScript對<input type="file">的value賦值是沒有任何效果的。當用戶選擇了上傳某個文件后，JavaScript也無法獲得該文件的真實路徑：
但是有個方法可以，利用File和FileReader兩個主要對象，可以獲得文件信息并讀取文件。

?

HTML文件：

<form method="post" enctype="multipart/form-data" id="file_upload"><p>圖片預覽：</p><img id="image-preview"><p><input type="file" id="file" name="upload_image" accept="image/gif, image/jpeg, image/png, image/jpg"><input type="button" value="下載圖片" onclick="save()" /></p><p id="info"></p> </form>

CSS文件：

#image-preview {border: 1px solid #ccc;width: 100%;height: 100%;max-width: 200px;max-height: 200px;background-size: contain;background-repeat: no-repeat;background-position: center center; }

JavaScript：

<script type="text/javascript">let fileInput = document.getElementById('file');let info = document.getElementById('info');let preview = document.getElementById('image-preview');// 監聽change事件:fileInput.addEventListener('change', function() {// 清除背景圖片:preview.style.backgroundImage = '';if (!fileInput.value) {info.innerHTML = '沒有選擇文件';return;}let file = fileInput.files[0];let size = file.size;if (size >= 1 * 1024 * 1024) {alert('文件大小超出限制');info.innerHTML = '文件大小超出限制';return false;}// 獲取File信息:info.innerHTML = `文件名稱: + ${file.name}<br>文件大小: ${file.size} <br>上傳時間: ${file.lastModifiedDate}`;if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {alert('不是有效的圖片文件!');return;}// 讀取文件:let reader = new FileReader();reader.onload = function(e) {let data = e.target.result;console.log(preview, 'a標簽')preview.src = data};// 以DataURL的形式讀取文件:reader.readAsDataURL(file);});function save() {var url = preview.src; // 獲取圖片地址var a = document.createElement('a'); // 創建一個a節點插入的documentvar event = new MouseEvent('click') // 模擬鼠標click點擊事件a.download = 'beautifulGirl' // 設置a節點的download屬性值a.href = url; // 將圖片的src賦值給a節點的hrefa.dispatchEvent(event)} </script>

總結

以上是生活随笔為你收集整理的关于HTML中上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。