一、頁面元素只有三個簡單元素：

拖拽區域

二、添加簡單的樣式：

.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;

}

頁面的樣子：

三、javascript的編寫：

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();//阻止事件默認動作的執行

},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 = "請確保為圖像類型";

return false;

}

reader.onload = function(e){

html += '

';

i++;

func();

}

reader.readAsDataURL(files[i]);

}else{

showimg.innerHTML +=html;

}

}

func();

}

}

return {

init:init

}

})();

Upload.init();

四、說明學習過程中重點理解的幾點：

1、這里的javascript的整體結構為：

var xxx=(function(){

function init(){...}

return {

init:init

}

})();

xxx.init();

定義了xxx對象，并用init()方法作為執行對象方法的入口。xxx就有點像java中的類，init()就像這個類的構造方法。xxx對象是一個Function，并用小括號括起來是為了將這個Function視為一個表達式，后面又緊跟一個小括號代表函數立即執行。

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

另外兩種寫法：

使用this關鍵字

var xxx=function(){

this.init = function(){..}

};

var exmple = new xxx;

exmple.init();

閉包

var xxx=function(){

var init = function(){...}

return init;

}

var init = xxx();

init();

這里調用的時候寫成var xxx= new xxx;效果是一樣的。

2、addEventListener方法第三個參數，代表事件的捕獲和冒泡。

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

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

3、拖拽事件：

dragdrop：拖放完成，也就是鼠標拖入對象并在拖放區域釋放。

dragenter：拖放進入，也就是鼠標拖放對象進入拖放區域。

dragleave：離開拖放區域。

dragover：拖放對象懸浮于拖放區域，在拖放區域內移動時多次觸發。

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

dragover中有個dataTransfer,對其的介紹：

DataTransfer

拖拽數據傳遞對象，一般使用方式event.dataTransfer。

dataTransfer.dropEffect[ =value]

拖拽效果，可選值：“none”, “copy”, “copyLink”, “copyMove”, “link”, “linkMove”, “move”, “all”, and “uninitialized”。

dataTransfer.items

拖拽的數據集合，是一個數組。

dataTransfer.setDragImage(element,x,y)

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

英文有點拗口，就是拖拽過程中定義一個元素替換原有的，可以看到拖拽元素跟隨的效果。

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.

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

dataTransfer.setData(format,data)

Adds the specified data.

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

dataTransfer.clearData( [format] )

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

清除自定義的數據格式及其數據。

dataTransfer.files

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

拖拽的文件列表對象。

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

4、事件的preventDefault()方法：

該方法將通知 Web 瀏覽器不要執行與事件關聯的默認動作(如果存在這樣的動作)。例如，如果 type 屬性是 "submit"，在事件傳播的任意階段可以調用任意的事件句柄，通過調用該方法，可以阻止提交表單。注意，如果 Event 對象的 cancelable 屬性是 fasle，那么就沒有默認動作，或者不能阻止默認動作。無論哪種情況，調用該方法都沒有作用。

5、javascript的style.cssText：

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

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

test()方法：

該方法的返回值是布爾值，通過該值可以匹配字符串中是否存在于正則表達式相匹配的結果，如果有匹配內容，返回ture，如果沒有匹配內容返回false，該方法常用于判斷用戶輸入數據的合法性，比如檢驗Email的合法性

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

/正則內容/?是一種正則的寫法

imge\/\w+

\/表示?/

\w+?表示一個或多個字母數字下劃線

+表示一個多個

7、FileReader

用來把文件讀入內存，并且讀取文件中的數據。FileReader接口提供了一個異步API，使用該API可以在瀏覽器主線程中異步訪問文件系統，讀取文件中的數據。到目前文職，只有FF3.6+和Chrome6.0+實現了FileReader接口。

1、FileReader接口的方法

FileReader接口有4個方法，其中3個用來讀取文件，另一個用來中斷讀取。無論讀取成功或失敗，方法并不會返回讀取結果，這一結果存儲在result屬性中。

FileReader接口的方法

方法名

參數

描述

readAsBinaryString

file

將文件讀取為二進制編碼

readAsText

file,[encoding]

將文件讀取為文本

readAsDataURL

file

將文件讀取為DataURL

abort

(none)

終端讀取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕獲讀取文件時的狀態。

FileReader接口的事件

事件

描述

onabort

中斷

onerror

出錯

onloadstart

開始

onprogress

正在讀取

onload

成功讀取

onloadend

讀取完成，無論成功失敗

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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