怎么實(shí)現(xiàn)圖片上傳前預(yù)覽功能呢？

預(yù)覽圖片

創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊(duì)，在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕十余年，專業(yè)且經(jīng)驗(yàn)豐富。十余年網(wǎng)站優(yōu)化營(yíng)銷經(jīng)驗(yàn)，我們已為千余家中小企業(yè)提供了成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)解決方案，按需策劃設(shè)計(jì)，設(shè)計(jì)滿意，售后服務(wù)無(wú)憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!

預(yù)覽功能的基本設(shè)計(jì)思路：創(chuàng)建一個(gè)img元素，再把文件域的value值賦值給img元素的src屬性。

form name="form4" id="form4" method="post" action="#"

input type="file" name="file4" id="file4" ōnchange="preview4()" /

img id="pic4" src="" alt="圖片在此顯示" width="120"/

/form

scrīpt type="text/javascrīpt"

function preview4(){

var x = document.getElementById("file4");

var y = document.getElementById("pic4");

if(!x || !x.value || !y)

return;

var patn = /\.jpg$|\.jpeg$|\.gif$/i;

if(patn.test(x.value)){

y.src = "" + x.value;

}

else{ alert("您選擇的似乎不是圖像文件。"); }

}

/scrīpt

試下效果：

如果你用的是Firefox（或Opera），可能會(huì)發(fā)現(xiàn)什么也沒有發(fā)生。是的，很不幸Firefox的安全策略不允許我們顯示一個(gè)用戶的本地圖像文件。不知道他們?yōu)槭裁匆@么做，我個(gè)人覺得圖像文件并不會(huì)造成嚴(yán)重的安全性問(wèn)題。即使是不久前比較熱門的那個(gè)會(huì)引起Windows崩潰的jpeg文件，要顯示它的前提條件是用戶自己選擇了這個(gè)文件或者你知道這個(gè)文件在用戶硬盤上的準(zhǔn)確路徑。所以我想這種策略很可能來(lái)自于一個(gè)“懶惰”的開發(fā)人員，他并不想多寫一些程序來(lái)區(qū)分這個(gè)本地文件是一個(gè)圖像文件還是一個(gè)惡意文件，F(xiàn)irefox對(duì)安全性的要求讓他們有些過(guò)于敏感了。

讓Firefox顯示本地文件的唯一辦法就是修改它的默認(rèn)安全策略：

在Firefox的地址欄中輸入“about:config”

繼續(xù)輸入“security.checkloaduri”

雙擊下面列出來(lái)的一行文字，把它的值由true改為false

然后你可以再試試上面預(yù)覽，everything works well！可惜的是我們并不能要求所有的用戶都去修改這個(gè)值（更不用說(shuō)修改的過(guò)程還挺麻煩），所以這對(duì)我們來(lái)說(shuō)毫無(wú)意義。我們能做的也許就是接受Firefox不能預(yù)覽本地圖片這種“可笑”的局面。

用DOM來(lái)創(chuàng)建對(duì)象

在上面的XHTML代碼中，我們?yōu)榱祟A(yù)覽圖片，事先加入了一個(gè)沒有設(shè)置src的img對(duì)象。除去不美觀、代碼冗余之外，如果用戶瀏覽器不支持Javascrīpt，他不僅無(wú)法使用這個(gè)功能，還要接受頁(yè)面上一個(gè)永遠(yuǎn)不會(huì)顯示出來(lái)的破圖。要解決這個(gè)問(wèn)題，我們就需要在“運(yùn)行時(shí)”再生成這個(gè)img對(duì)象，途徑還是DOM。

form name="form5" id="form5" method="post" action="#"

input type="file" name="file5" id="file5" ōnchange="preview5()"/

/form

scrīpt type="text/javascrīpt"

function preview5(){

var x = document.getElementById("file5");

if(!x || !x.value)

return;

var patn = /\.jpg$|\.jpeg$|\.gif$/i;

if(patn.test(x.value)){

var y = document.getElementById("img5");

if(y){ y.src = '' + x.value; }

else{

var img=document.createElement('img');

img.setAttribute('src',''+x.value);

img.setAttribute('width','120');

img.setAttribute('height','90');

img.setAttribute('id','img5');

document.getElementById('form5').appendChild(img);

}

}

else{ alert("您選擇的似乎不是圖像文件。"); }

}

/scrīpt

html5拖拽圖片上傳，怎么獲得圖片原始尺寸

拖拽的過(guò)程就不說(shuō)了，這里主要說(shuō)一下如何在前端獲取到圖片的相關(guān)信息。

html5里有一個(gè)fileReader的全局變量，用來(lái)讀取本地文件，比如txt，img等，下面是一個(gè)簡(jiǎn)單的代碼。

function?checkFile(files){

var?file?=?files[0];

var?reader?=?new?FileReader();

//?show表示div?id='show'/div，用來(lái)展示圖片預(yù)覽的

if(!/image\/\w+/.test(file.type)){

show.innerHTML?=?"請(qǐng)確保文件為圖像類型";

return?false;

}

//?onload是異步操作

reader.onload?=?function(e){

show.innerHTML?=?'img?src="'+e.target.result+'"?alt="img"';

}

reader.readAsDataURL(file);

}

這樣就能夠在不上傳到服務(wù)器的前提下預(yù)覽圖片。當(dāng)然，這個(gè)問(wèn)題的重點(diǎn)是獲取圖片的原始尺寸，html5里還提供了兩個(gè)變量來(lái)獲取：naturalWidth和naturalHeight，這兩個(gè)分別來(lái)獲取圖片的原始寬度和原始高度。

在上面的例子中，就能通過(guò)下面的方式獲取到：

var?width?=?e.target.naturalWidth;

var?height?=?e.target.naturalHeight;

還有一種情況就是，如果已經(jīng)存在頁(yè)面里的圖片，怎么獲取到原始尺寸呢，可以這樣：

var?img?=?document.getElementsByTagName('img')[0];?//?獲取到圖片

var?width?=?img.naturalWidth;

var?height?=?img.naturalHeight;

如何在手機(jī)瀏覽器中運(yùn)用HTML5的文件API實(shí)現(xiàn)上傳多圖功能

Html5終于解決了上傳文件的同時(shí)顯示文件上傳進(jìn)度的老問(wèn)題。現(xiàn)在大部分的網(wǎng)站用Flash去實(shí)現(xiàn)這一功能，還有一些網(wǎng)站繼續(xù)采用Html formwith enctype=multipart/form-data，但是需要修改服務(wù)器端可用才能顯示給用戶文件上傳的進(jìn)度。本質(zhì)上你需要做的工作是在服務(wù)器端接收一個(gè)文件時(shí)，你發(fā)送給它一個(gè)字節(jié)流，所以你需要知道你已經(jīng)接收到多少字節(jié)并以某種方式傳達(dá)這些信息給客戶端瀏覽器，在這個(gè)過(guò)程一直在不斷的進(jìn)行文件的上傳。這種方式運(yùn)行的非常好，不像Flash上傳那這樣充滿了問(wèn)題(特別是處理大文件上傳的時(shí)候)，然而這種方法是相當(dāng)復(fù)雜的并且聽起來(lái)不容易理解，因?yàn)槟惚举|(zhì)上是接管了整個(gè)服務(wù)器端的處理（獲取字節(jié)流的時(shí)候）同時(shí)包括了在服務(wù)器端實(shí)現(xiàn)multipart/form-data協(xié)議，伴隨一系列的其他事情。

使用Html5 上傳文件

XMLHttpRequest 在Html5 規(guī)范中已經(jīng)有全新的變化，規(guī)定了XMLHttpRequest Level 2規(guī)范（目前最新版本）包含下列新的特性：

處理字節(jié)流，例如作為上傳或者下載的File，Blob，F(xiàn)ormData對(duì)象

上傳或者下載中的進(jìn)度事件

跨站點(diǎn)請(qǐng)求

允許創(chuàng)建匿名請(qǐng)求

可以設(shè)置請(qǐng)求超時(shí)

在這篇文章中我們將能夠更清楚的看到#1和#2兩個(gè)特性。通常，上傳文件用XMLHttpRequest并且提供上傳進(jìn)度信息給最終的用戶，需要注意的是這種方式解決了不需要服務(wù)器端做任何改變，至少是目前處理multipart/form-data協(xié)議。所以服務(wù)器端的處理邏輯保留不變，這使得開發(fā)者適應(yīng)這種技術(shù)相當(dāng)容易。

圖1：文件上傳畫面-準(zhǔn)備上傳 圖2：顯示上傳完成畫面

注意：上面的圖片中，信息提示區(qū)域是提供給用戶的：

當(dāng)前選中文件的信息

文件名

文件大小

文件類型

上傳完成多少的百分比進(jìn)度條

上傳速度或者上傳帶寬

距離上傳完成大概還有多長(zhǎng)時(shí)間

已上傳文件大小

服務(wù)器端的響應(yīng)

上面第6項(xiàng)或許看起來(lái)不重要，但事實(shí)上是相當(dāng)重要的。因?yàn)槲覀冇肵MLHttpRequest，上傳發(fā)生在后臺(tái)，頁(yè)面沒有發(fā)生跳轉(zhuǎn)等任何變化，所以對(duì)于你用它處理其他一些事情來(lái)說(shuō)是一個(gè)非常好的特性。

Html5 Progress Event

對(duì)于Html5 Progress Events規(guī)范，Html5 Progess Events提供了下列與本次討論相關(guān)的信息

total - 總的字節(jié)數(shù)

loaded - 到目前為止上傳的字節(jié)數(shù)

lengthComputable - 可計(jì)算的已上傳字節(jié)

請(qǐng)注意到我們需要用兩個(gè)信息去計(jì)算要顯示給用戶的其他所有信息。要計(jì)算出來(lái)其他的信息通過(guò)上面我們得到信息是相當(dāng)容易的，但是那需要一些額外的代碼并且創(chuàng)建一個(gè)定時(shí)器。

Html5 Progress Event 應(yīng)該是什么

考慮到有一部分人想更好的提供給用戶所有的信息，所以Html5 Progress Event應(yīng)該更好的滿足需要，因?yàn)樗o瀏覽器供應(yīng)商提供這些額外信息是相當(dāng)簡(jiǎn)單的，所以建議progress event應(yīng)該修改成如下：

total - 總的字節(jié)數(shù)

loaded - 到目前為止上傳的字節(jié)數(shù)

lengthComputable - 可計(jì)算的已上傳字節(jié)

transferSpeed long類型

timeRemaining JavaScript 日期對(duì)象

Html5 上傳 用XMLHttpRequest

瀏覽器支持情況

支持這一特性的瀏覽器最低版本

Firefox 4.0 beta 6

Chrome 6

Safari 5.02

IE 9 Beta and Opera 10.62 不支持這一特性

簡(jiǎn)單的示例

下面是一個(gè)完整的Html頁(yè)面包含了實(shí)現(xiàn)文件上傳并帶有進(jìn)度提示的JavaScript代碼，只是實(shí)現(xiàn)了基本的功能，感興趣的可以自己做擴(kuò)展。 需要吧上傳接口修改成自己服務(wù)的。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

!DOCTYPE html

html

head

titleUpload Files using XMLHttpRequest - Minimal/title

script type="text/javascript"

function fileSelected() {

var file = document.getElementById('fileToUpload').files[0];

if (file) {

var fileSize = 0;

if (file.size 1024 * 1024)

fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';

else

fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

document.getElementById('fileName').innerHTML = 'Name: ' + file.name;

document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;

document.getElementById('fileType').innerHTML = 'Type: ' + file.type;

}

}

function uploadFile() {

var fd = new FormData();

fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", uploadProgress, false);

xhr.addEventListener("load", uploadComplete, false);

xhr.addEventListener("error", uploadFailed, false);

xhr.addEventListener("abort", uploadCanceled, false);

xhr.open("POST", "upload.do");//修改成自己的接口

xhr.send(fd);

}

function uploadProgress(evt) {

if (evt.lengthComputable) {

var percentComplete = Math.round(evt.loaded * 100 / evt.total);

document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';

}

else {

document.getElementById('progressNumber').innerHTML = 'unable to compute';

}

}

function uploadComplete(evt) {

/* 服務(wù)器端返回響應(yīng)時(shí)候觸發(fā)event事件*/

alert(evt.target.responseText);

}

function uploadFailed(evt) {

alert("There was an error attempting to upload the file.");

}

function uploadCanceled(evt) {

alert("The upload has been canceled by the user or the browser dropped the connection.");

}

/script

/head

body

form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx"

div class="row"

label for="fileToUpload"Select a File to Upload/labelbr /

input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/

/div

div id="fileName"/div

div id="fileSize"/div

div id="fileType"/div

div class="row"

input type="button" onclick="uploadFile()" value="Upload" /

/div

div id="progressNumber"/div

/form

/body

/html

html input file 屬性怎么能夠選擇之后 馬上預(yù)覽圖片

這個(gè)并不是那么簡(jiǎn)單做出來(lái)的，一般情況下會(huì)加一段iframe代碼，模擬ajax上傳。

代碼很簡(jiǎn)單，如下：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titleBy：DragonDean/title

script type="text/javascript"

//下面用于圖片上傳預(yù)覽功能

function setImagePreview(avalue) {

var docObj=document.getElementById("doc");

var imgObjPreview=document.getElementById("preview");

if(docObj.files docObj.files[0])

{

//火狐下，直接設(shè)img屬性

imgObjPreview.style.display = 'block';

imgObjPreview.style.width = '150px';

imgObjPreview.style.height = '180px';

//imgObjPreview.src = docObj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式

imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

}

else

{

//IE下，使用濾鏡

docObj.select();

var imgSrc = document.selection.createRange().text;

var localImagId = document.getElementById("localImag");

//必須設(shè)置初始大小

localImagId.style.width = "150px";

localImagId.style.height = "180px";

//圖片異常的捕捉，防止用戶修改后綴來(lái)偽造圖片

try{

localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

}

catch(e)

{

alert("您上傳的圖片格式不正確，請(qǐng)重新選擇!");

return false;

}

imgObjPreview.style.display = 'none';

document.selection.empty();

}

return true;

}

/script

/head

body

table width="100%" border="0" cellspacing="0" cellpadding="0"

tbody

tr

td height="101" align="center"

div id="localImag"img id="preview" src="" width="150" height="180" style="display: block; width: 150px; height: 180px;"/div

/td

/tr

tr

td align="center" style="padding-top:10px;"input type="file" name="file"

id="doc" style="width:150px;" onchange="javascript:setImagePreview();"/td

/tr

/tbody

/table

/body

/html