JS HTML5拖拽上傳圖片預(yù)覽
本文實(shí)例為大家分享了JS HTML5拖拽上傳圖片預(yù)覽的具體代碼,供大家參考,具體內(nèi)容如下
1.文件API:(File API)
file類型的的表單控件選擇的每一個(gè)文件都是一個(gè)file對(duì)象,而FileList對(duì)象則是這些file對(duì)象的集合列表,代表所選擇的所有文件。file對(duì)象繼承于Blob對(duì)象,該對(duì)象表示二進(jìn)制原始數(shù)據(jù),提供slice方法,可以訪問(wèn)到字節(jié)內(nèi)部的原始數(shù)據(jù)塊。總之,file對(duì)象包含與FlieList對(duì)象,而file對(duì)象繼承于Blob對(duì)象!
各對(duì)象的相關(guān)屬性關(guān)系:
FileReader接口:
由圖可知:HTML5還提供了FileReader接口:用于將文件讀入內(nèi)存,并讀取文件中的數(shù)據(jù)。
var reader=new FileReader();
該接口總共有四個(gè)方法和六個(gè)事件:
•readAsBinaryString(file):讀取文件為二進(jìn)制
•readAsDataURL(file):讀取文件DataURL
•readAsText(file,[encoding]):讀取文件為文本
•about(none):中斷文件讀取
--------------------------------------------------------------------------------
•onabort:讀取文件中斷時(shí)觸發(fā)
•onerror:讀取文件出錯(cuò)時(shí)觸發(fā)
•onloadstart:讀取文件開(kāi)始時(shí)觸發(fā)
•onprogress:讀取文件中時(shí)一直觸發(fā)
•onload:讀取文件成功時(shí)觸發(fā)
•onloadend:讀取文件結(jié)束時(shí)觸發(fā)(成功和失敗都會(huì)觸發(fā))
以上事件參數(shù)e有e.target.result或this.result指向讀取的結(jié)果!
2.拖放API:
拖放屬性:將需要拖放的元素的dragable屬性設(shè)置為true(dragable=”true”)!img元素和a元素默認(rèn)可以拖放。
拖放事件:(分為拖放元素事件和目標(biāo)元素事件)
拖放元素事件:
•dragstart:拖拽前觸發(fā)
•drag ,拖拽前、拖拽結(jié)束之間,連續(xù)觸發(fā)
•dragend , 拖拽結(jié)束觸發(fā)
目標(biāo)元素事件:
•dragenter , 進(jìn)入目標(biāo)元素觸發(fā)
•dragover ,進(jìn)入目標(biāo)、離開(kāi)目標(biāo)之間,連續(xù)觸發(fā)
•dragleave , 離開(kāi)目標(biāo)元素觸發(fā)
•drop , 在目標(biāo)元素上釋放鼠標(biāo)觸發(fā)
但是!需要注意的是:在目標(biāo)元素中dragover和drop事件中要阻止默認(rèn)行為(拒絕被拖放),否則拖放不能被實(shí)現(xiàn)!
-----------------------------
DataTransfer對(duì)象:專門用于存放拖放時(shí)要攜帶的數(shù)據(jù),可以被設(shè)置為拖放事件的dataTransfer屬性。
3個(gè)屬性:
•effectAllowed : 設(shè)置光標(biāo)樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
•effectAllowed:設(shè)置拖放操作的視覺(jué)效果
•types:存入數(shù)據(jù)的種類,字符串的偽數(shù)組
•files:獲取外部拖拽的文件,返回一個(gè)fileList列表,filesList下有個(gè)type屬性,返回文件的類型
4個(gè)方法:
•setData() : 設(shè)置數(shù)據(jù) key和value(必須是字符串)
•getData() : 獲取數(shù)據(jù),根據(jù)key值,獲取對(duì)應(yīng)的value
•clearData():清除DataTransfer對(duì)象存放的數(shù)據(jù)
•setDragImage(imageUrl,log x,long y):用img元素來(lái)設(shè)置拖放圖標(biāo)
//示例:
target.addEventListener('dragstart',function(e){
var fs = e.dataTransfer.files;//獲取拖放的文件對(duì)象列表FlieList對(duì)象
var dt=e.dataTransfer;//作為拖放事件的dataTransfer屬性
dt.effectAllowed='copy';
dt.setData('text/plain','hello');
dt.setDragImage(dragIcom,-10,-10);
});
3.拖拽上傳圖片預(yù)覽:
思路:
1.熟悉文件拖拽 目標(biāo)元素 的四個(gè)事件,注意:ondragover、ondrop事件中阻止默認(rèn)行為
2.拖拽放置后,獲取到文件對(duì)象集合:e.dataTransfer.files
3.循環(huán)該集合中的每個(gè)文件對(duì)象,判斷文件類型以及文件大小,是指定類型則進(jìn)行相應(yīng)的操作
4.讀取文件信息對(duì)象:new FileReader(),它有讀取文件對(duì)象為DataUrl等方法:readAsDataURL(文件對(duì)象)、讀取成功之后觸發(fā)的事件:onload事件等,this.result為讀取到的數(shù)據(jù)
5.在FileReader對(duì)象中的幾個(gè)事件中進(jìn)行相應(yīng)的邏輯處理
HTML:
<div class="container"> <p class="text">請(qǐng)將圖片文件拖拽至此區(qū)域!</p> </div>
總加載數(shù):<span id='total'>100</span>
JQ:
<script type="text/javascript"> $(function() { /*思路: *1.熟悉文件拖拽 目標(biāo)元素 的四個(gè)事件,注意:ondragover、ondrop事件中阻止默認(rèn)行為 *2.拖拽放置后,獲取到文件對(duì)象集合:e.dataTransfer.files *3.循環(huán)該集合中的每個(gè)文件對(duì)象,判斷文件類型以及文件大小,是指定類型則進(jìn)行相應(yīng)的操作 *4.讀取文件信息對(duì)象:new FileReader(),它有讀取文件對(duì)象為DataUrl等方法:readAsDataURL(文件對(duì)象)、讀取成功之后觸發(fā)的事件:onload事件等,this.result為讀取到的數(shù)據(jù) *5.在FileReader對(duì)象中的幾個(gè)事件中進(jìn)行相應(yīng)的邏輯處理 * */ //必須將jq對(duì)象轉(zhuǎn)換為js對(duì)象,調(diào)用原生方法 var oDiv = $(".container").get(0); var oP = $(".text"); //進(jìn)入 oDiv.ondragenter = function() { oP.html(''); } //移動(dòng),需要阻止默認(rèn)行為,否則直接在本頁(yè)面中顯示文件 oDiv.ondragover = function(e) { e.preventDefault(); } //離開(kāi) oDiv.onleave = function() { oP.html('請(qǐng)將圖片文件拖拽至此區(qū)域!'); } //拖拽放置,也需要阻止默認(rèn)行為 oDiv.ondrop = function(e) { e.preventDefault(); //獲取拖拽過(guò)來(lái)的對(duì)象,文件對(duì)象集合 var fs = e.dataTransfer.files; //若為表單域中的file標(biāo)簽選中的文件,則使用form[表單name].files[0]來(lái)獲取文件對(duì)象集合 //打印長(zhǎng)度 console.log(fs.length); //循環(huán)多文件拖拽上傳 for (var i = 0; i < fs.length; i++) { //文件類型 var _type = fs[i].type; console.log(_type); //判斷文件類型 if (_type.indexOf('image') != -1) { //文件大小控制 console.log(fs[i].size); //讀取文件對(duì)象 var reader = new FileReader(); //讀為DataUrl,無(wú)返回值 reader.readAsDataURL(fs[i]); reader.onloadstart = function(e) { //開(kāi)始加載 } // 這個(gè)事件在讀取進(jìn)行中定時(shí)觸發(fā) reader.onprogress = function(e) { $("#total").html(e.total); } //當(dāng)讀取成功時(shí)觸發(fā),this.result為讀取的文件數(shù)據(jù) reader.onload = function() { //文件數(shù)據(jù) // console.log(this.result); //添加文件預(yù)覽 var oImg = $("<img style='width:100px;' src='' />"); oImg.attr("src", this.result); $(oDiv).append(oImg); //oDiv轉(zhuǎn)換為js對(duì)象調(diào)用方法 } //無(wú)論成功與否都會(huì)觸發(fā) reader.onloadend = function() { if (reader.error) { console.log(reader.error); } else { //上傳沒(méi)有錯(cuò)誤,ajax發(fā)送文件,上傳二進(jìn)制文件 } } } else { alert('請(qǐng)上傳圖片文件!'); } } } }); </script>
效果圖:
總結(jié):結(jié)合拖放事件API,DataTransfer對(duì)象和文件讀取對(duì)象FileList等方面的知識(shí),實(shí)現(xiàn)簡(jiǎn)易拖拽上傳圖片預(yù)覽效果。需要了解熟悉個(gè)對(duì)象的關(guān)系以及用法,明確好實(shí)現(xiàn)思路!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS獲得一個(gè)對(duì)象的所有屬性和方法實(shí)例
下面小編就為大家?guī)?lái)一篇JS獲得一個(gè)對(duì)象的所有屬性和方法實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02Javascript異步編程模型Promise模式詳細(xì)介紹
異步模式在 Web 編程中變得越來(lái)越重要,如何處理異步請(qǐng)求后的操作是一件麻煩事。Promise 是一種異步編程模型,術(shù)語(yǔ)稱作 Deferred 模式,它通過(guò)一組API來(lái)規(guī)范化異步操作,讓異步操作的流程控制更加容易。2014-05-05JS+CSS實(shí)現(xiàn)大氣清新的滑動(dòng)菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)大氣清新的滑動(dòng)菜單效果代碼,通過(guò)鼠標(biāo)事件結(jié)合定時(shí)函數(shù)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)變換的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JS實(shí)現(xiàn)的找零張數(shù)最小問(wèn)題示例
這篇文章主要介紹了JS實(shí)現(xiàn)的找零張數(shù)最小問(wèn)題,涉及javascript數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-11-11關(guān)于js中window.location.href,location.href,parent.location.href
關(guān)于js中window.location.href,location.href,parent.location.href,top.location.href的用法2010-10-10