• 使用javascript原生功能實現,點擊上傳文件,然后再網頁上顯示出來

1. 初級顯示

1.1 準備一個input標簽和一個img標簽

<input type=file id="file"> <img id="preview" src="">

1.2 js代碼如下

// 將上傳的圖片顯示到頁面上function showUpload() {// 選擇文件上傳控件var file = document.querySelector('#file')var img = document.querySelector('#preview')// 當用戶選擇完文件以后file.onchange = function() {// 1.創建文件讀取對象var reader = new FileReader()// 用戶選擇的文件列表// console.log(this.files[0])// 2. 讀取文件reader.readAsDataURL(this.files[0])// 3. 監聽 onload 事件reader.onload = function() {img.src = reader.result}}}showUpload();

1.3 原理說明:

• img可以根據圖片的二進制格式,將圖片顯示再網頁上
• FileReader對象 可以將圖片轉換成二進制格式.

---

2. 實現多圖片上傳并顯示.

• 說明一下…沒有傳遞給服務器…即沒有存在服務器的磁盤上…僅僅只是再客戶端的內存中…關了就沒了…

2.1 上傳控件和容器的準備

• 先準備html,和一個放圖片的容器

<!-- 注意 此處多了multiple --> <input type="file" id="file" multiple> <div class="container"> </div>

2.2 js代碼思路

首先獲取input的dom.然后監聽它的提交事件file.onchange

上傳的圖片組可以通過this.files訪問到.

根據this.files的數量,創建同等數量的img標簽document.createElement('img')

設置img標簽的屬性,并追加到container里面dom.appendChild

• 實現代碼如下:

function showMultiUpload() {var file = document.querySelector('#file')var dom = document.querySelector('#imgs')dom.innerHTML = ''file.onchange = function() {for (var i = 0; i < this.files.length; i++) {var img = document.createElement('img')img.width = '100'img.height = '100'var reader = new FileReader()reader.readAsDataURL(this.files[i])reader.onload = function() {img.src = reader.resultdom.appendChild(img)}}} } showMultiUpload()

2.2 錯誤說明

1.上面上傳了7張圖片,但是在瀏覽器上面只顯示了一張,原因是
2.javascript中的for循環是同步執行的,而將圖片轉換成二進制代碼的接口readAsDataURL是異步的
3.因此需要使用閉包來延長參數的作用域
4.使用一個立即執行函數如下:

function showMultiUpload() {var file = document.querySelector('#file')var dom = document.querySelector('#imgs')dom.innerHTML = ''file.onchange = function() {for (var i = 0; i < this.files.length; i++) {var that = this;(function(i) {var img = document.createElement('img')img.width = '100'img.height = '100'var reader = new FileReader()reader.readAsDataURL(that.files[i])reader.onload = function() {img.src = reader.resultdom.appendChild(img)}})(i)}} } showMultiUpload()

ps:選擇多個文件的時候,需要按住alt或者shift

總結

以上是生活随笔為你收集整理的javascript --- 文件上传即时预览 闭包实现多图片即时预览的全部內容，希望文章能夠幫你解決所遇到的問題。

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