Javascript圖片上傳前的本機預覽實例_javascript技巧

圖片的上傳預覽功能主要用於圖片上傳前的一個效果的預覽，目前主流的方法主要有js，jquery與flash實現，但我們一般都會使用js來實現圖片上傳預覽功能，下面來看一個例子。

原理:

分為兩步驟：當上傳圖片的input被觸發並選擇本地圖片之後獲取要上傳的圖片這個物件的URL（物件URL）；把物件URL賦值給事先寫好的img標籤的src屬性即可把圖片顯示出來。

在這裡，我們需要了解Javascript裡File物件、Blob物件和window.URL.createObjectURL()方法。

File物件:

File物件可以用來取得某個檔案的資訊,還可以用來讀取這個檔案的內容.通常情況下,File物件是來自使用者在一個input元素上選擇檔案後傳回的FileList物件,也可以是來自由拖放操作產生的DataTransfer物件.
下面來看取得FileList物件：

複製程式碼 程式碼如下:

Blob物件：

一個Blob物件就是一個包含有唯讀原始資料的類別檔案物件.Blob物件中的資料並不一定得是JavaScript中的原生形式.File介面基於Blob,繼承了Blob的功能,並且擴充支援了使用者電腦上的本機檔案.
我們想要得到的物件URL其實就是從Blob這個物件取得的，因為File的介面繼承Blob。下面就來把Blob物件轉換成URL：

複製代碼 代碼如下:

相容性：

上述方法適用於chrome瀏覽器
如果是IE瀏覽器可以直接使用input的value來取代src
網路上查看資料有直接使用File物件的getAsDataURL()方法取得URL的，現在這個方法都已經廢除，類似的還有getAsText()和getAsBinary()方法,我們來看這樣一個例子。

複製程式碼 程式碼如下:

function getFullPath(obj) {得到圖片的完整圖片路徑 
    if (obj) { 
//ie 
if (window.navigator.userAgent.indexOf("MSIE") >= 1) { 
   document.selection.createRange().text; 
} 
//firefox 
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) { 
files) { 
return obj.files.item(0).getAsDataURL(); 
    } 
    return obj.value  } >}



這段程式碼是取得客戶端圖片的完整路徑
我們再限制其大小和格式

複製程式碼

程式碼如下:

$("#loadFile").change(function () { 
var strSrc = $("#loadFile").val(); 
img = new Image(); 
img.src = getFullPath(strSrc); 
//驗證上傳檔案格式是否正確 
var pos = strSrc.lastIndexOf("."); 
var lastname = strSrc.substring(pos, strSrc. length) 
if (lastname.toLowerCase() != ".jpg") { 
    alert("您上傳的文件類型為" lastname "，圖片必須為JPG 類型") 
   return fal 
} 
//驗證上傳檔案寬高比例 

if (img.height / img.width > 1.5 || img.height / img.width     return; 
} 
//驗證上傳檔案是否超出了大小 
if (img.fileSize / 1024 > 150) { 
    alert("您上傳的檔案大小超出了150K限制！"); 
    return false; 
}
    return false; 
}

    return false;  }

}

其中，loadFile是html input file的id。在它的change事件，也就是選擇了要上傳的檔案以後，讓圖片顯示在圖片框裡嗎，在上面程式碼的最後加上以下程式碼

複製程式碼 程式碼如下:

$("#stuPic"). ", getFullPath(this));



既然用到了jQuery,下面我們再分享一個用jQuery的寫的程式碼實例：





複製程式碼


程式碼如下: