關(guān)于HTML中上傳圖片

值得注意的是：當(dāng)一個(gè)表單里面包含這個(gè)上傳元素的時(shí)候，表單的enctype必須指定為multipart/form-data,method必須指定為post，瀏覽器才會(huì)認(rèn)識(shí)并正確執(zhí)行。

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

?

HTML文件：

<form method="post" enctype="multipart/form-data" id="file_upload"><p>圖片預(yù)覽：</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');// 監(jiān)聽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>上傳時(shí)間: ${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標(biāo)簽')preview.src = data};// 以DataURL的形式讀取文件:reader.readAsDataURL(file);});function save() {var url = preview.src; // 獲取圖片地址var a = document.createElement('a'); // 創(chuàng)建一個(gè)a節(jié)點(diǎn)插入的documentvar event = new MouseEvent('click') // 模擬鼠標(biāo)click點(diǎn)擊事件a.download = 'beautifulGirl' // 設(shè)置a節(jié)點(diǎn)的download屬性值a.href = url; // 將圖片的src賦值給a節(jié)點(diǎn)的hrefa.dispatchEvent(event)} </script>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。