當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript上传图片方式
生活随笔
收集整理的這篇文章主要介紹了
JavaScript上传图片方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一種：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>#preview{width:200px;margin-bottom:10px;}</style> </head> <body><input type="file" name="" id="btn"><div id="preview"></div><script>var preview = document.querySelector("#preview");var btn = document.querySelector("#btn");btn.onchange = function(e){var file = this;for(var i = 0; i < this.files.length; i++){var reader = new FileReader();reader.onload = function(event){console.log(event);preview.innerHTML += '<img src="'+event.target.result+'"/>'}reader.readAsDataURL(file.files[0]);}}</script> </body> </html>第二種：
<html><head><title>input files的預覽圖||文件列表刪除操作 -- By SlippersClown.黑皮</title><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>img {width: 100%;max-height: 150px;}div.pre-item {width: 200px;padding: 20px 0;}.pre-item {cursor: pointer;position: relative;}.pre-item:hover::after {content: '點擊刪除';padding: 10px 0px;border-radius: 5px;z-index: 1;position: absolute;top: 50%;left: 50%;cursor: pointer;width: 80%;text-align: center;background-color: rgba(0, 0, 0, .7);color: #FFF;transform: translate(-50%, -50%);}input[type="file"] {position: relative;/*width: 0;height: 0;*/margin-bottom: 40px;}input[type="file"]::after {content: '選擇要上傳的文件';background-color: rgb(12, 150, 229);border-radius: 5px;position: absolute;width: 200px;color: #FFF;line-height: 30px;font-size: 14px;cursor: pointer;top: 0;left: 0;text-align: center;}</style> </head><body><input type="file" id="upload" multiple><div id="file-list-dom"></div><script>/*********************************************** ** @authors Hacker丶Wand (578112964@qq.com) ** @link http://www.slippersclown.com ** @date 2016-10-29 22:20:18 ** ***********************************************/let upload = document.querySelector('#upload');let fileListDom = document.querySelector('#file-list-dom');let fileList = {};let formData = new FormData();upload.addEventListener('change', function() {for (let i = this.files.length - 1; i >= 0; i--) {let file = this.files[i];let key = file.name;let fileItem = {'file': file,'cover': ''}if (/(image\/)/.test(file.type)) {let reader = new FileReader();reader.readAsDataURL(file);reader.onload = function() {fileItem.cover = this.result;fileList[key] = fileItem;formData.append(key, file);showFile(key, true);}} else {fileList[key] = fileItem;formData.append(key, file);showFile(key, false);}}});// 觸發刪除事件fileListDom.addEventListener('click', function(e) {let target = e.target || e.srcElement;if (target.classList.contains('pre-item')) {delFile(target.getAttribute('key'));}});// 顯示圖片function showFile(key, isImg) {let file = document.querySelector(`[key="${key}"]`);if (file === null) {if (isImg) {fileListDom.innerHTML += '<div key="' + key + '" class="pre-item"><img src="' + fileList[key].cover + '"/></div>';} else {fileListDom.innerHTML += '<div key="' + key + '" class="pre-item">' + key + '</div>';}} else {file.style.display = 'block';}}// 刪除圖片function delFile(key) {let file = document.querySelector(`[key="${key}"]`);if (file !== null) {delete fileList[key];formData.delete(key);file.style.display = 'none';}}</script> </body></html>?
總結
以上是生活随笔為你收集整理的JavaScript上传图片方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 主题与颜色--Dcat-Admin框架实
- 下一篇： gradle idea java ssm