快捷導(dǎo)航

Javascript圖片上傳前的本地預(yù)覽實(shí)例

更新時(shí)間：2014年06月16日 12:08:04 投稿：shichen2014

圖片的上傳預(yù)覽功能主要用于圖片上傳前的一個(gè)效果的預(yù)覽，這篇文章主要介紹了Javascript圖片上傳前的本地預(yù)覽實(shí)例,需要的朋友可以參考下

圖片的上傳預(yù)覽功能主要用于圖片上傳前的一個(gè)效果的預(yù)覽，目前主流的方法主要有js，jquery與flash實(shí)現(xiàn)，但我們一般都會(huì)使用js來(lái)實(shí)現(xiàn)圖片上傳預(yù)覽功能，下面來(lái)看一個(gè)例子。

原理:

分為兩步：當(dāng)上傳圖片的input被觸發(fā)并選擇本地圖片之后獲取要上傳的圖片這個(gè)對(duì)象的URL（對(duì)象URL）；把對(duì)象URL賦值給事先寫(xiě)好的img標(biāo)簽的src屬性即可把圖片顯示出來(lái)。

在這里，我們需要了解Javascript里File對(duì)象、Blob對(duì)象和window.URL.createObjectURL()方法。

File對(duì)象:

File對(duì)象可以用來(lái)獲取某個(gè)文件的信息,還可以用來(lái)讀取這個(gè)文件的內(nèi)容.通常情況下,File對(duì)象是來(lái)自用戶在一個(gè)input元素上選擇文件后返回的FileList對(duì)象,也可以是來(lái)自由拖放操作生成的 DataTransfer對(duì)象.
下面來(lái)看獲取FileList對(duì)象：

復(fù)制代碼代碼如下:

<script type="text/javascript" src="jquery.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
    // 獲取FileList的第一個(gè)元素
    alert(document.getelementbyid('upload').files[0]);
});
</script>

Blob對(duì)象：

一個(gè)Blob對(duì)象就是一個(gè)包含有只讀原始數(shù)據(jù)的類文件對(duì)象.Blob對(duì)象中的數(shù)據(jù)并不一定得是JavaScript中的原生形式.File接口基于Blob,繼承了Blob的功能,并且擴(kuò)展支持了用戶計(jì)算機(jī)上的本地文件.
我們想要得到的對(duì)象URL實(shí)際上就是從Blob這個(gè)對(duì)象獲取的，因?yàn)镕ile的接口繼承Blob。下面就來(lái)把Blob對(duì)象轉(zhuǎn)換成URL：

復(fù)制代碼代碼如下:

<script type="text/javascript">
var f = document.getelementbyid('upload').files[0];
var src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src;
</script>

兼容性：

上述方法適用于chrome瀏覽器
如果是IE瀏覽器可以直接使用input的value來(lái)代替src
網(wǎng)上查看資料有直接使用File對(duì)象的getAsDataURL()方法獲取URL的，現(xiàn)在這個(gè)方法都已經(jīng)廢除，類似的還有g(shù)etAsText()和getAsBinary()方法,我們來(lái)看這樣一個(gè)例子。

復(fù)制代碼代碼如下:

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

這段代碼是獲取客戶端圖片的完整路徑
我們?cè)傧拗破浯笮『透袷?/P>

復(fù)制代碼代碼如下:

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

if (img.height / img.width > 1.5 || img.height / img.width < 1.25) {  
    alert("您上傳的圖片比例超出范圍，寬高比應(yīng)介于1.25-1.5");  
    return;  
}  
//驗(yàn)證上傳文件是否超出了大小  
if (img.fileSize / 1024 > 150) {  
    alert("您上傳的文件大小超出了150K限制！");  
    return false;  
} 

其中，loadFile是html input file的id。在它的change事件，也就是選擇了要上傳的文件以后，讓圖片顯示在圖片框里嗎，在上面代碼的最后加上以下代碼

復(fù)制代碼代碼如下:

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

既然用到了jQuery,下面我們?cè)俜窒硪粋€(gè)用jQuery的寫(xiě)的代碼實(shí)例：

復(fù)制代碼代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
 $(function(){
        var ei = $("#large");
        ei.hide();
        $("#img1").mousemove(function(e){
                ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
        }).mouseout( function(){
                ei.hide("slow");
        })
        $("#f1").change(function(){
                $("#img1").attr("src","file:///"+$("#f1").val());
        })
 });
</script>
<style type="text/css">
        #large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
<form name="form1" id="form1">
<div id="demo">
<input id="f1" name="f1" type="file" />
<img id="img1" width="60" height="60">
</div>
<div id="large"></div>
</form>
</body>
</html>