友們，下午好！

都說一張美美的圖能為文章增色三分！

那如果是一個交互的圖片樣式 + 幾張美美圖呢？這能為文章增色多少呢？

比如這種（樣式ID：90298）

使用這種樣式，即能有效的展示圖片，還能縮小文章空間，而且還與讀者存在互動交互，想不想知道這種樣式怎么做出來呢？

上面兩種樣式都可以在樣式中心輸入ID搜索到。

但是，樣式中心的原樣式，都是四張圖片滑動的，直接進行換圖就可以使用了。

但如果要像三兒上面做的兩個樣式，一個是5張圖，一個是9張圖，就要進HTML進行修改了。

教程一（帶圖片說明的樣式）

進入到“HTML”模式，找到<section .........> </section>這段代碼，先選擇Ctrl+C復制。

然后在此段代碼結尾處敲回車鍵換行，再選擇Ctrl+V粘貼。

粘貼幾次，樣式就會在原有四張的基礎上多出幾張，胖友們可以根據自己的需求進行多次粘貼。

教程二

進入到“HTML”模式，找到<img src=........./>這段代碼，先選擇Ctrl+C復制，然后在此段代碼結尾處，再Ctrl+V粘貼。

同上個樣式，粘貼幾次，樣式就會在原有四張的基礎上多出幾張，胖友們可以根據自己的需求進行多次粘貼。

為了樣式的美感，還是有三點建議給大家。

1、圖片請保持尺寸一致。否則會導致圖片層次不齊。

2、尺寸請500x500以上。否則可能會使圖片不清楚。

3、圖片大小盡可能小點。否則瀏覽時加載會不流暢。

更多好玩樣式，請進樣式中心搜索“滾動”

好了，本次教程就到這里~bye

擊右上方紅色按鈕關注“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()">

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

// 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; 
}

這樣看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的點擊事件，達到能選擇圖片的目的。

公告

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

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