js原生簡單的上傳圖片

Nosee 發(fā)布于2019-08-23 14:06 / 1129人閱讀

摘要：對(duì)象可以是來自上傳文件返回的對(duì)象，也可以來自拖放生成的對(duì)象，還可以是來自在一個(gè)上執(zhí)行方法后返回結(jié)果。這是官方介紹哈上傳請(qǐng)上傳圖片簡單的上傳圖片并瀏覽就完成嘍效果圖

學(xué)習(xí)前端的小伙伴們在項(xiàng)目中肯定都遇到過上傳圖片的這種功能吧.

那么今天我們就來學(xué)習(xí)一下原生的上傳圖片吧~

go go go go~~~~

在原生js中j就有一個(gè)很簡單的方法用來操作文件 ——FileReader

允許web應(yīng)用程序異步讀取儲(chǔ)存在用戶電腦上的文件，可以使用file和blob對(duì)象指定要讀取的文件或數(shù)據(jù)。File對(duì)象可以是來自input上傳文件返回的fileList對(duì)象，也可以來自拖放生成的DataTransfer對(duì)象，還可以是來自在一個(gè)HTMLCanvasElement上執(zhí)行mozGetAsFile()方法后返回結(jié)果。

這是官方介紹哈!

ok！簡單的上傳圖片并瀏覽就完成嘍！

效果圖：

云服務(wù)器 GPU云服務(wù)器簡單的上傳圖片js js 上傳圖片的案例手機(jī)圖片切換js原生簡單js圖片輪轉(zhuǎn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/100080.html

相關(guān)文章

原生JS上傳圖片接收服務(wù)器端圖片并且顯示圖片（主要描述blob類型）

摘要：處理業(yè)務(wù)邏輯元素的事件觸發(fā)后將銷毀對(duì)象釋放內(nèi)存。瀏覽器允許使用方法，針對(duì)對(duì)象生成一個(gè)臨時(shí)。這個(gè)以開頭表明對(duì)應(yīng)一個(gè)對(duì)象。 1.了解后端處理圖像的方式一：圖片以獨(dú)立文件的形式存儲(chǔ)在服務(wù)器的指定文件夾中，再將路徑存入數(shù)據(jù)庫字段中二：將圖片轉(zhuǎn)換成blob，直接存儲(chǔ)到數(shù)據(jù)庫的 Image 類型字段中（這種方式負(fù)擔(dān)很大不建議使用） blob (binary large object)二進(jìn)制大對(duì)象...

yuxue 2019-08-23 15:31 評(píng)論0 收藏0
原生JS上傳圖片接收服務(wù)器端圖片并且顯示圖片（主要描述blob類型）

摘要：處理業(yè)務(wù)邏輯元素的事件觸發(fā)后將銷毀對(duì)象釋放內(nèi)存。瀏覽器允許使用方法，針對(duì)對(duì)象生成一個(gè)臨時(shí)。這個(gè)以開頭表明對(duì)應(yīng)一個(gè)對(duì)象。 1.了解后端處理圖像的方式一：圖片以獨(dú)立文件的形式存儲(chǔ)在服務(wù)器的指定文件夾中，再將路徑存入數(shù)據(jù)庫字段中二：將圖片轉(zhuǎn)換成blob，直接存儲(chǔ)到數(shù)據(jù)庫的 Image 類型字段中（這種方式負(fù)擔(dān)很大不建議使用） blob (binary large object)二進(jìn)制大對(duì)象...

Airmusic 2019-08-02 14:21 評(píng)論0 收藏0
兩種主流上傳圖片的方法：jQuery+Multer || 原生JS

摘要：原文首發(fā)博主經(jīng)過實(shí)踐，這里給出兩種處理用戶上傳圖片的方法，前后端代碼皆有前端后端的中間件提交告訴不要去處理發(fā)送的數(shù)據(jù)告訴不要去設(shè)置請(qǐng)求頭后端代碼用初始化項(xiàng)目之后，新建一個(gè)路由文件路由設(shè)置上傳的圖片文件存放的地方為根目錄下的文件夾原文首發(fā)：https://shuirong.github.io/博主經(jīng)過實(shí)踐，這里給出兩種處理用戶上傳圖片的方法，前后端代碼皆有． 1. 前端jQuery,后...

cnTomato 2019-08-21 11:41 評(píng)論0 收藏0
使用原生JS 或jquery ajax 獲取上傳圖片實(shí)時(shí)進(jìn)度

話不多說直接上代碼 jquery 版 $.ajax({ url: URL, type: POST, data: fd, processData: false, //用來回避jquery對(duì)formdata的默認(rèn)序列化，XMLHttpRequest會(huì)對(duì)其進(jìn)行正確處理 contentType: false, /...

PingCAP 2019-08-22 13:52 評(píng)論0 收藏0
vuejs使用FormData，ajax上傳圖片文件

摘要：我相信很多使用的朋友，都有采用上傳圖片的需求，因?yàn)榍昂蠖朔蛛x后，我們希望都能用來解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會(huì)導(dǎo)致提交成功后頁面跳轉(zhuǎn)，而使用能夠無刷新上傳圖片等文件。我相信很多使用vuejs的朋友，都有采用ajax上傳圖片的需求，因?yàn)榍昂蠖朔蛛x后，我們希望都能用ajax來解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會(huì)導(dǎo)致提交成功后頁面跳轉(zhuǎn)，而使用ajax能夠無刷新上傳圖片等文件。其實(shí)已經(jīng)有朋友封裝了...

zollero 2019-08-20 18:34 評(píng)論0 收藏0