首頁 > 開發者 > JavaScript
圖片的上傳預覽功能主要用於圖片上傳前的一個效果的預覽，目前主流的方法主要有js，jquery與flash實現，但我們一般都會使用js來實現圖片上傳預覽功能，下面來看一個例子。
原理:
分為兩步：當上傳圖片的input被觸發並選擇本地圖片之後擷取要上傳的圖片這個對象的URL（對象URL）；把對象URL賦值給事先寫好的img標籤的src屬性即可把圖片顯示出來。
在這裡，我們需要瞭解Javascript裡File對象、Blob對象和window.URL.createObjectURL()方法。
File對象:
File對象可以用來擷取某個檔案的資訊,還可以用來讀取這個檔案的內容.通常情況下,File對象是來自使用者在一個input元素上選擇檔案後返回的FileList對象,也可以是來自由拖放操作產生的 DataTransfer對象.
下面來看擷取FileList對象：
複製代碼 代碼如下:
<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的第一個元素
alert(document.getelementbyid('upload').files[0]);
});
</script>
Blob對象：
一個Blob對象就是一個包含有唯讀未經處理資料的類檔案對象.Blob對象中的資料並不一定得是JavaScript中的原生形式.File介面基於Blob,繼承了Blob的功能,並且擴充支援了使用者電腦上的本地檔案.
我們想要得到的對象URL實際上就是從Blob這個對象擷取的，因為File的介面繼承Blob。下面就來把Blob對象轉換成URL：
複製代碼 代碼如下:
<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來代替src
網上查看資料有直接使用File對象的getAsDataURL()方法擷取URL的，現在這個方法都已經廢除，類似的還有getAsText()和getAsBinary()方法,我們來看這樣一個例子。
複製代碼 代碼如下:
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;
}
}
這段代碼是擷取用戶端圖片的完整路徑
我們再限制其大小和格式
複製代碼 代碼如下:
$("#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 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
