一、頁(yè)面元素只有三個(gè)簡(jiǎn)單元素：

拖拽區(qū)域

二、添加簡(jiǎn)單的樣式：

.dragarea{

width:300px;

height:100px;

background:#ddd;

text-align:center;

line-height:100px;

}

.drag_hover{

background:rgba(0,0,0,.4) !important;

}

.item{

width:300px;

height:100px;

float:left;

margin-right:30px;

margin-bottom:50px;

}

.item > img{

height:auto;

width:100%;

}

.big{

position: fixed;

top: 100px;

left: 0px;

}

頁(yè)面的樣子：

三、javascript的編寫(xiě)：

var Upload = (function(){

var upimg = document.getElementById("upimg");

var dragimg = document.getElementById("dragimg");

var showimg = document.getElementById("showimg");

function init(){

if(!(window.FileReader && window.File

&& window.FileList && window.Blob)){

showimg.innerHTML="您的瀏覽器不支持FileReader";

return false;

}

handler();

}

function handler(){

upimg.addEventListener("change",function(e){

var files = this.files;

if(files.length){

checkFiles(files);

}

});

dragimg.addEventListener("dragenter",function(e){

this.className += " drag_hover";

},false);

dragimg.addEventListener("dragleave",function(e){

this.className = "dragarea";

},false);

dragimg.addEventListener("drop",function(e){

var files = e.dataTransfer.files;

this.className = "dragarea";

if(files.length !=0){

checkFiles(files);

}

e.preventDefault();//阻止事件默認(rèn)動(dòng)作的執(zhí)行

},false);

dragimg.addEventListener("dragover",function(e){

e.dataTransfer.dropEffect = "copy";

e.preventDefault();

},false);

showimg.addEventListener("click",function(e){

var target = e.target;

if(target.tagName.toUpperCase() == "IMG"){

var parent = target.parentNode;

var items = this.childNodes;

var big = parent.className.indexOf("big") >0;

for(var i=0;i

items[i].className = "item";

items[i].firstElementChild.style.cssText="";

}

if(!big){

target.style.cssText="width:"+target.naturalWidth+"px;height:"+target.naturalHeight+"px";

parent.className +=" big";

}

}

},false);

}

function checkFiles(files){

if(files.length != 0){

var html = "";

var i=0,j=showimg.childElementCount;

var func = function(){

if(files[i]){

var x = parseInt((i+j)/4)*50;

var reader = new FileReader();

if(!/image\/\w+/.test(files[i].type)){

showimg = "請(qǐng)確保為圖像類(lèi)型";

return false;

}

reader.onload = function(e){

html += '

';

i++;

func();

}

reader.readAsDataURL(files[i]);

}else{

showimg.innerHTML +=html;

}

}

func();

}

}

return {

init:init

}

})();

Upload.init();

四、說(shuō)明學(xué)習(xí)過(guò)程中重點(diǎn)理解的幾點(diǎn)：

1、這里的javascript的整體結(jié)構(gòu)為：

var xxx=(function(){

function init(){...}

return {

init:init

}

})();

xxx.init();

定義了xxx對(duì)象，并用init()方法作為執(zhí)行對(duì)象方法的入口。xxx就有點(diǎn)像java中的類(lèi)，init()就像這個(gè)類(lèi)的構(gòu)造方法。xxx對(duì)象是一個(gè)Function，并用小括號(hào)括起來(lái)是為了將這個(gè)Function視為一個(gè)表達(dá)式，后面又緊跟一個(gè)小括號(hào)代表函數(shù)立即執(zhí)行。

注意：在全局調(diào)用了init()方法,而該方法是在一個(gè)函數(shù)中的，要知道全局無(wú)法訪問(wèn)函數(shù)內(nèi)部的變量或者方法，所以這里將init方法return，全局才可以訪問(wèn)。

另外兩種寫(xiě)法：

使用this關(guān)鍵字

var xxx=function(){

this.init = function(){..}

};

var exmple = new xxx;

exmple.init();

閉包

var xxx=function(){

var init = function(){...}

return init;

}

var init = xxx();

init();

這里調(diào)用的時(shí)候?qū)懗蓈ar xxx= new xxx;效果是一樣的。

2、addEventListener方法第三個(gè)參數(shù)，代表事件的捕獲和冒泡。

true：事件捕獲，事件從最不精確的對(duì)象(document 對(duì)象)開(kāi)始觸發(fā)，然后到最精確，順序document——>body——>div——>目標(biāo)元素；

false：事件冒泡，事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā)，和上面的順序相反。

3、拖拽事件：

dragdrop：拖放完成，也就是鼠標(biāo)拖入對(duì)象并在拖放區(qū)域釋放。

dragenter：拖放進(jìn)入，也就是鼠標(biāo)拖放對(duì)象進(jìn)入拖放區(qū)域。

dragleave：離開(kāi)拖放區(qū)域。

dragover：拖放對(duì)象懸浮于拖放區(qū)域，在拖放區(qū)域內(nèi)移動(dòng)時(shí)多次觸發(fā)。

這個(gè)例子中我只在dragenter和dragleave事件中做了背景顏色的切換。

dragover中有個(gè)dataTransfer,對(duì)其的介紹：

DataTransfer

拖拽數(shù)據(jù)傳遞對(duì)象，一般使用方式event.dataTransfer。

dataTransfer.dropEffect[ =value]

拖拽效果，可選值：“none”, “copy”, “copyLink”, “copyMove”, “l(fā)ink”, “l(fā)inkMove”, “move”, “all”, and “uninitialized”。

dataTransfer.items

拖拽的數(shù)據(jù)集合，是一個(gè)數(shù)組。

dataTransfer.setDragImage(element,x,y)

Uses the given element to update the drag feedback, replacing any previously specified feedback.

英文有點(diǎn)拗口，就是拖拽過(guò)程中定義一個(gè)元素替換原有的，可以看到拖拽元素跟隨的效果。

dataTransfer.addElement(element)

Adds the given element to the list of elements used to render the drag feedback.

dataTransfer.types

Returns a?DOMStringList?listing the formats that were set in the?dragstart event. In addition, if any files are being dragged, then one of the types will be the string “Files”.

data=dataTransfer.getData(format)

Returns the specified data. If there is no such data, returns the empty string.

獲取自定義的數(shù)據(jù)格式，如ev.dataTransfer.getData("text");通常是配合ev.dataTransfer.setData使用。

dataTransfer.setData(format,data)

Adds the specified data.

添加自定義數(shù)據(jù)格式，如ev.dataTransfer.setData("text", ev.target.innerHTML);有點(diǎn)像jquery里面的data

dataTransfer.clearData( [format] )

Removes the data of the specified formats. Removes all data if the argument is omitted.

清除自定義的數(shù)據(jù)格式及其數(shù)據(jù)。

dataTransfer.files

Returns a?FileList?of the files being dragged, if any.

拖拽的文件列表對(duì)象。

那么drop事件中的e.dataTransfer.files也不難理解了。

4、事件的preventDefault()方法：

該方法將通知 Web 瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作(如果存在這樣的動(dòng)作)。例如，如果 type 屬性是 "submit"，在事件傳播的任意階段可以調(diào)用任意的事件句柄，通過(guò)調(diào)用該方法，可以阻止提交表單。注意，如果 Event 對(duì)象的 cancelable 屬性是 fasle，那么就沒(méi)有默認(rèn)動(dòng)作，或者不能阻止默認(rèn)動(dòng)作。無(wú)論哪種情況，調(diào)用該方法都沒(méi)有作用。

5、javascript的style.cssText：

可以像jquery中的css()方法一樣用一行代碼添加多種樣式，只是會(huì)覆蓋之前的樣式，所以在使用cssText的時(shí)候可以這樣寫(xiě) obj.style.cssText +="width:30px;height:40px";用加號(hào)添加樣式。

6、正則表達(dá)式/image\/\w+/.test():

test()方法：

該方法的返回值是布爾值，通過(guò)該值可以匹配字符串中是否存在于正則表達(dá)式相匹配的結(jié)果，如果有匹配內(nèi)容，返回ture，如果沒(méi)有匹配內(nèi)容返回false，該方法常用于判斷用戶輸入數(shù)據(jù)的合法性，比如檢驗(yàn)Email的合法性

/image\/\w+/的解釋：

/正則內(nèi)容/?是一種正則的寫(xiě)法

imge\/\w+

\/表示?/

\w+?表示一個(gè)或多個(gè)字母數(shù)字下劃線

+表示一個(gè)多個(gè)

7、FileReader

用來(lái)把文件讀入內(nèi)存，并且讀取文件中的數(shù)據(jù)。FileReader接口提供了一個(gè)異步API，使用該API可以在瀏覽器主線程中異步訪問(wèn)文件系統(tǒng)，讀取文件中的數(shù)據(jù)。到目前文職，只有FF3.6+和Chrome6.0+實(shí)現(xiàn)了FileReader接口。

1、FileReader接口的方法

FileReader接口有4個(gè)方法，其中3個(gè)用來(lái)讀取文件，另一個(gè)用來(lái)中斷讀取。無(wú)論讀取成功或失敗，方法并不會(huì)返回讀取結(jié)果，這一結(jié)果存儲(chǔ)在result屬性中。

FileReader接口的方法

方法名

參數(shù)

描述

readAsBinaryString

file

將文件讀取為二進(jìn)制編碼

readAsText

file,[encoding]

將文件讀取為文本

readAsDataURL

file

將文件讀取為DataURL

abort

(none)

終端讀取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕獲讀取文件時(shí)的狀態(tài)。

FileReader接口的事件

事件

描述

onabort

中斷

onerror

出錯(cuò)

onloadstart

開(kāi)始

onprogress

正在讀取

onload

成功讀取

onloadend

讀取完成，無(wú)論成功失敗

在這個(gè)例子中?reader.readAsDataURL(files[i])觸發(fā)了onload方法

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的html5 查看图片,html5实现图片预览和查看原图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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