首先創建簡單的JSP頁面，並在jsp頁面中引入jquery-1.4.2.min.js文件。
JSP代碼如下：
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="showpic_fake" class="wait" style="margin-top:0px;">
<img id="showpic" width="315" height="168" src=""/>
<input id="pic1" type="hidden" value=""/>
<img id="showpic_size_fake" src="" style="visibility:hidden;" />
</div>
<div class="upload upload_2">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="40">圖片：</td>
<td width="373">
<input type="hidden" id="pictureName" name="pictureName" readonly="readonly" />
<input type="file" id="picture" name="picture" value="" οnchange="getFile(this,'showpic','showpic_fake','pictureName')" class=""/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
其次創建一個JS文件
JS代碼如下：
function getFile(curr,preview,preview_fake,hiddenImgUrl){
onUploadImgChange(curr,preview,preview_fake,1,hiddenImgUrl);
}
function onUploadImgChange(sender,preview,preview_fake,file_upload_size,hiddenImgURLObj){
if( !sender.value.match( /.jpg|.jpeg|.gif|.png|.bmp/i ) ){
alert('圖片格式無效！');
return false; }
var objPreview = document.getElementById(preview);
var objPreviewFake = document.getElementById(preview_fake);
var MAXWIDTH = 315;
var MAXHEIGHT = 168;
$("#"+preview_fake).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)");
var imgSrc="";
var div=$("#"+preview_fake);
if( sender.files && sender.files[0] ){
objPreview.style.display = 'block';
// Firefox 因安全性問題已無法直接通過 input[file].value 獲取完整的文件路徑
if($.browser.mozilla){
var versions = browser();
if(parseInt(versions.substring(8, versions.indexOf("."))) < 7){
imgSrc = sender.files.item(0).getAsDataURL();
}else{
imgSrc = window.URL.createObjectURL(sender.files[0]); }
objPreview.src = imgSrc;
alert(objPreview.getAttribute("src"));
}else{
objPreview.οnlοad=function(){
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, objPreview.offsetWidth, objPreview.offsetHeight);
objPreview.width = rect.width;
objPreview.height = rect.height;
objPreview.style.marginLeft = rect.left+'px';
objPreview.style.marginTop = rect.top+'px'; }
var reader = new FileReader();
reader.onload = function(evt){objPreview.src =evt.target.result;}
reader.readAsDataURL(sender.files[0]); }
}else if( objPreviewFake.filters ){
// IE7,IE8 在設置本地圖片地址爲 img.src 時出現莫名其妙的後果
//（相同環境有時能顯示，有時不顯示），因此只能用濾鏡來解決
// IE7, IE8因安全性問題已無法直接通過 input[file].value 獲取完整的文件路徑
sender.select();
imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
autoSizePreview( objPreviewFake,objPreviewFake.offsetWidth-2, objPreviewFake.offsetHeight-2 );
objPreview.style.display = 'none'; }
if(null!=hiddenImgURLObj&&""!=hiddenImgURLObj){
$("#"+hiddenImgURLObj).val(imgSrc); }
}
// 獲取當前瀏覽器版本號
function browser() {
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox/([d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome/([d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version/([d.]+).*safari/)) ? Sys.safari = s[1] : 0;
if (Sys.ie) return 'IE ' + Sys.ie;
if (Sys.firefox) return 'Firefox ' + Sys.firefox;
if (Sys.chrome) return 'Chrome ' + Sys.chrome;
if (Sys.opera) return 'Opera ' + Sys.opera;
if (Sys.safari) return 'Safari ' + Sys.safari;
}
function autoSizePreview( objPre, originalWidth, originalHeight )
{
var zoomParam = clacImgZoomParam( originalWidth, originalHeight, originalWidth, originalHeight );
objPre.style.width = zoomParam.width + 'px';
objPre.style.height = zoomParam.height + 'px';
objPre.style.marginTop = zoomParam.top + 'px';
objPre.style.marginLeft = zoomParam.left + 'px';
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = { width:width, height:height, top:0, left:0 };
if( width>maxWidth || height>maxHeight ){
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight ){
param.width = maxWidth;
param.height = height / rateWidth;
}else{
param.width = width / rateHeight;
param.height = maxHeight; }
}
param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2;
return param;
}
//乘法運算
function accMul(arg1,arg2){
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight ) {
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight ) {
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
}else{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}
param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}
