Javascript圖片上傳前的本地預覽實例

2024-05-06 16:09:01

字體：大中小

來源：轉載

供稿：網友

圖片的上傳預覽功能主要用于圖片上傳前的一個效果的預覽，這篇文章主要介紹了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()方法,我們來看這樣一個例子。

復制代碼代碼如下:

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

復制代碼代碼如下:

$("#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 false;
}
//驗證上傳文件寬高比例

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

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<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 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>
<div>
<input type="file" />
<img>
</div>
<div></div>
</form>
</body>
</html>