該問題直接用代碼比較直觀:
1.假設頁面如此
<div>
<div class="upload-face-panel btnbgim">
<input id="imageFile" name="imageFile" type="file"/>
<div class="upload-face">
<span class="icon"></span>
<span class="info"><a href="javascript:void(0)">選擇您要上傳的頭像</a></span>
</div>
</div>
</div>
<div>
<div class="ui-whitespaces">
<p class="ui-txt-muted">僅支持JPG,JPEG,PNG格式</p>
</div>
</div>
<div class="ui-form-lable">
<div class="ui-lable-div" id='bigImg'></div>
<div class="ui-effect">
<h3 class="ui-margin-h3">效果預覽</h3>
<div class="ui-form-div preview" id='smallImg'></div>
<div class="ui-whitespaces">
<p class="ui-txt-muted">80 * 80像素</p>
</div>
</div>
</div>
2在file輸入框綁定change事件:
$("#imageFile").on('change', changeFace());// 圖像上傳
3.具體方法如下:IE8以下通過濾鏡效果,另外不通瀏覽器獲取本地圖片絕對路徑方法是不一樣的,因爲瀏覽器的保護機制。這個想了解得自己研究。
/**圖像上傳預覽*/
changeFace : function() {
var file = $("#imageFile");//選擇的文件
var imgSrc = $(this)[0].value;
if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
imgSrc = "";
alert("圖片格式不正確!");
return;
}
if(window.FileReader){//chrome,firefox7+,opera,IE10+
var file = $(this)[0].files[0];
urlAdr = URL.createObjectURL(file);
$("#bigImg").html("<img class='img-padding' id='preview'>");
$("#smallImg").html("<img class='img-padding1' id='preview1'>");
$("#preview").attr("src", urlAdr);;//預覽大圖
$("#preview1").attr("src", urlAdr);;//預覽小圖
}else if (file.files) {//firefox6-
if (file.files.item(0)) {
urlAdr = file.files.item(0).getAsDataURL();
};
$("#bigImg").html("<img class='img-padding' id='preview'>");
$("#smallImg").html("<img class='img-padding1' id='preview1'>");
$("#preview").attr("src", urlAdr);;//預覽大圖
$("#preview1").attr("src", urlAdr);;//預覽小圖
}else{//IE9、IE8
urlAdr = imgSrc;
$("#bigImg").attr('style', "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:260px;height:260px; text-align:center");
$("#smallImg").attr('style', "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:80px;height:80px; text-align:center");
document.getElementById("bigImg").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
document.getElementById("smallImg").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
}