文章目錄

js的拖拽上傳,并在頁面中展示

• 文章目錄
• 前言
• 一、js實(shí)現(xiàn)拖拽功能(文件拖拽到指定位置)
• 二、關(guān)于怎么讀取文件內(nèi)容(用到FileRead()對象)
• • 1.第一步:遍歷傳遞過來的file
  • 2.第二步:判斷傳遞過來的文件是否是圖片格式
  • 3.第三步:創(chuàng)建 new FileRead() 對象,然后 拿到創(chuàng)建的對象調(diào)用 readAsDataURL(f) 方法
  • 4.第四步: new FileRead()對象中的 onload方法,通過 e.target.result :獲取到當(dāng)前圖片的base64地址,然后給圖片的src
• 問題(解決方案):

---

前言

本次實(shí)現(xiàn)的功能,也可以通過更改事件屬性:轉(zhuǎn)變成點(diǎn)擊然上傳文件的轉(zhuǎn)變(點(diǎn)擊上傳文件這里就不在展示了,基本思路都很像!!)

---

話不多說,直接上代碼!!!

一、js實(shí)現(xiàn)拖拽功能(文件拖拽到指定位置)

div.addEventListener(‘dragenter’, denter);
div.addEventListener(‘dragover’, dover);
div.addEventListener(‘drop’, dp)
綁定了三個事件分別是: 1.拖拽文件進(jìn)入div 2.拖拽文件在div上 3.鼠標(biāo)松開

<div class="box"></div><script>let div = document.querySelector('.box');div.addEventListener('dragenter', denter);div.addEventListener('dragover', dover);div.addEventListener('drop', dp)function denter(e) {e.preventDefault();}function dover(e) {e.preventDefault();}function dp(e) {e.stopPropagation(); //阻止事件冒泡e.preventDefault();//阻止默認(rèn)事件 (上面的都一樣)//拿到拖拽的文件var file = e.dataTransfer.files//調(diào)用函數(shù)傳遞文件的內(nèi)容,然后進(jìn)行解析轉(zhuǎn)化為bas64格式的內(nèi)容handFiles(file);}</script>

二、關(guān)于怎么讀取文件內(nèi)容(用到FileRead()對象)

1.第一步:遍歷傳遞過來的file

2.第二步:判斷傳遞過來的文件是否是圖片格式

3.第三步:創(chuàng)建 new FileRead() 對象,然后 拿到創(chuàng)建的對象調(diào)用 readAsDataURL(f) 方法

4.第四步: new FileRead()對象中的 onload方法,通過 e.target.result :獲取到當(dāng)前圖片的base64地址,然后給圖片的src

代碼如下（示例）：

function handFiles(file) {for (let index = 0; index < file.length; index++) {var f = file[index];//判斷是否是圖片var imageType = /^image/if (!imageType.test(f.type)) {continue};//創(chuàng)建圖片var im = document.createElement('img');/* im.classList.add('obj'); */div.appendChild(im);//讀取文件對象var reader = new FileReader(); //讀取文件對象//通過reader開始讀取內(nèi)容,一旦讀取成功,會在result屬性中獲取一個base64的字符串//讀取文件是一個異步過程reader.readAsDataURL(f);//這里使用了一次立即執(zhí)行函數(shù)(解決的問題是變量作用域帶來的問題)reader.onload = function(aimg) {//第一種直接給src賦值// im.src = e.target.result return function(e) {aimg.src = e.target.result;}}(im)}}

---

問題(解決方案):

這個方法的案例,容易在修改圖片地址的位置,出現(xiàn)變量作用域的問題導(dǎo)致圖片地址無法被正常更改,解決方法:①使用閉包函數(shù)解決 ②使用立即執(zhí)行函數(shù) ③將所有的變量都用 es6 的let聲明.

總結(jié)

以上是生活随笔為你收集整理的JavaScript 上传文件并展示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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