10行JavaScript代碼完成圖片的上傳預覽

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

冬至，希望大家都可以有餃子和湯圓吃，主要是能和自己家人愛人一起吃個飯。

下面進入主題，用原生JS給擼個圖片上傳，預覽的小示例，希望對大家有所幫助。

示例

function fChange() { 
 let file=document.getElementById('file'); 
 // 輸出已經選擇圖片名字 
 console.log(file.value); 
 // 輸出已經選擇的圖片對象 
 console.log(file.files[0]); 
} 
... 
<input type="file" id="file" onchange="fChange()">

10行JavaScript代碼完成圖片的上傳預覽

我們怎么把圖片對象渲染到頁面了？達到可以預覽的目的？

// file 轉 blob對象 
let bold=window.URL.createObjectURL(file.files[0]); 
console.log('bold==>'+bold); 
 
let boldImg=document.getElementById('bold'); 
boldImg.src=bold; 
 
// file 轉 base64 
let base64Img=document.getElementById('base64'); 
var reader=new FileReader(); 
reader.readAsDataURL(file.files[0]); 
reader.onload=function (e) { 
 console.log('base64==>'+this.result); 
 base64Img.src=this.result; 
}

10行JavaScript代碼完成圖片的上傳預覽

這樣看blob對象和base64都可以預覽圖片，但是blob對象僅僅是當次緩存，如果刷新，你重新把之前轉的字符串放到src是不可以預覽的，當時base64是可以的。所以存庫的時候不僅可以圖片路徑，還可以直接存base64（base64很占用數據庫空間，文件越大，base64字符串越大）

優化

下面我們對上面示例做優化，可以上傳多張圖片并預覽，美化界面。

10行JavaScript代碼完成圖片的上傳預覽

<div id="img-pre"> 
</div> 
<div id="add-pic"> 
 <input type="file" id="up-file" onchange="fChange()"> 
</div>

css樣式

#add-pic{ 
 width: 100px; 
 height: 100px; 
 background: url('./add-pic.png') 
} 
#add-pic input{ 
 width: 100%; 
 height: 100%; 
 display: none; 
} 
#img-pre:after{ 
 display: block; 
 content: ''; 
 clear: both; 
} 
#img-pre img{ 
 float: left; 
 width: 100px; 
 height: 100px; 
 margin-right: 10px; 
}

javascript

let addPic=document.getElementById('add-pic'), upFile=document.getElementById('up-file'); 
// 監聽圖片點擊，從而觸發input file的點擊事件 
addPic.addEventListener('click', function(){ 
 upFile.click(); 
}) 
function fChange() { 
 let file=document.getElementById('up-file'); 
 let imgPre=document.getElementById('img-pre'); 
 
 // file 轉 blob對象 
 let bold=window.URL.createObjectURL(file.files[0]); 
 
 // 創建img元素，并添加到img-pre元素里 
 var img=document.createElement("img"); 
 img.setAttribute("src", bold); 
 imgPre.appendChild(img); 
}

主要是通過css隱藏掉input file選擇文件按鈕，然后用+號圖片點擊事件來觸發input file的點擊事件，達到能選擇圖片的目的。

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址請點擊下方“了解更多”

者：藍色的秋風

轉發鏈接：https://mp.weixin.qq.com/s/cruL9JGZNZQFrMSrzJJWiQ

端頁面：html

<!DOCTYPE html>

<head>

</head>

<body>

$(document).ready(function (){

var settings={

url: "upload.php",

dragDrop: true,

fileName: "myfile",

allowedTypes: "jpg,png,gif,doc,pdf,zip",

returnType: "json",

onSuccess: function (files, data, xhr){

$('.imgPreview').show();

$('.imgPreview').attr('src','uploads/'+data);

}

在線咨詢

上一篇：HTML 基礎的<td>
下一篇：保姆級教程，AI虛擬人情感號自媒體視頻制作全流程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

10行JavaScript代碼完成圖片的上傳預覽

前言

示例

優化

公告

您的項目需求