JavaScript實現本地圖片上傳預覽功能（兼容IE、chrome、FF）

需要解決的問題有：本地圖片如何在上傳前預覽、編輯；
最近發現這個功能很多是基于flash實現的，很多JavaScript實現的代碼兼容性都很差，特別是在IE和firefox和chrome三個瀏覽器上不兼容。
代碼實現主要利用到jquery插件imgAreaSelect，FileReader對象（chrome和ff獲取本地圖片數據的接口），IE濾鏡效果。

關鍵詞：imgAreaSelect FileReaderdocument.selection.createRange() IE濾鏡效果

一、實現上傳前預覽
1.1、頁面顯示
代碼1-1顯示的是html需要展示的web頁面信息

<!—預覽圖片顯示區域-->
<div id=”image_area”>
<img id="biuuu"src="#" title="biuuu">
</div>
<!—圖片上傳區域-->
<div id =”upload_area”>
<form name = "form1"action =' /person?c=changeAtvatar' enctype = 'multipart/form-data' method = 'POST'>
<input type="file"id="picpath" name="atvatar_image">
<a href="javascript:void(0);"class="button"> 上傳照片</a>
<input type='text'name="path" readonly>
<div id = “submit_button”>
<a href="javascript:void(0);"class='button'>確認</a>
</div>

為了修改input file的按鈕名稱，我們添加了一段代碼，這個在第二節將會詳細說明

<a href="javascript:void(0);" class="button">上傳照片</a>
<input type='text'name="path" readonly>

1.2、實現預覽在線編輯
這里我們主要使用了一個插件進行圖片編輯，如果需要具體查看學習可查看網址
http://odyniec.net/projects/imgareaselect/，使用方法還是很簡單方便的。

$('#biuuu').imgAreaSelect({
aspectRatio:'1:1', //截取比例
show:true,
resizable:true, //是否可調整大小
autoHide: false,//選擇框選擇完畢是否自己取消
handles:true,
key:true, //是否啟用鍵盤，默認為false
//x1: 75, y1: 30, x2:225, y2: 180, //需要處理的區域，原始的
//x1:左上角x軸坐標 y1:左上角y軸坐標 x2:右下角x軸坐標 y2:右下角y軸坐標
keys: { arrows: 1,ctrl: 5, shift: 'resize' }, //調整像素大小
//onInit:function(img, selection) { ias.setSelection(100, 50, 250, 150, true);ias.update(); }, //設置初始函數 畫出選擇框
onSelectChange:preview //選框移動時觸發的事件
//onSelectEnd:function(img, select){alert(select.width)} //選框結束時觸發的事件
});

代碼1-2主要是設置需要編輯圖片的一些插件屬性，具體查看插件的參量說明。
首先我們需要創建一個預覽小圖片在img之后

$('<div><imgid="view" src='+atvatarUrl+' style="position: relative;"/></div>')
.css({
float: 'left',
position:'relative',
overflow:'hidden',
width: '100px',
height: '100px'
}).insertAfter('#biuuu');//把新建元素放到 #biuuu 之后

代碼1-3是創建一個小預覽圖片在img之后

1.3、實現在線預覽功能

function previewImage(file)
{
var porImg = $('#biuuu'),//首先獲取大圖片jquery對象
viewImg = $('#view');//小圖片jquery對象
//判斷該瀏覽器是否為w3c標準，既非IE瀏覽器 
if (file["files"] && file["files"][0])
{
//使用JavaScript的FileReader對象來讀取本地數據，并且將數據結果賦值給image的src，具體該對象如何實現的還未深入研究
var reader = newFileReader();
reader.onload =function(evt){
porImg.attr({src :evt.target.result});
viewImg.attr({src: evt.target.result});
}
reader.readAsDataURL(file.files[0]);
}

function previewImage(file)
{
var porImg = $('#biuuu'),//首先獲取大圖片jquery對象
viewImg = $('#view');//小圖片jquery對象
//判斷該瀏覽器是否為w3c標準，既非IE瀏覽器 
if (file["files"] && file["files"][0])
{
//使用JavaScript的FileReader對象來讀取本地數據，并且將數據結果賦值給image的src，具體該對象如何實現的還未深入研究
var reader = newFileReader();
reader.onload =function(evt){
porImg.attr({src :evt.target.result});
viewImg.attr({src: evt.target.result});
}
reader.readAsDataURL(file.files[0]);
}
//如果是IE瀏覽器，采用濾鏡效果，進行顯示，但特別注意的是該濾鏡效果使用的對象是div對象，并非img對象，因此我們需要將原有的img對象remove同時生成新的div對象，并且賦值相應的class和id
else
{
//創建需要濾鏡顯示的div的dom對象
var ieImageDom =document.createElement("div");
var proIeImageDom =document.createElement("div");
//設置對象的css屬性和原有的img對象屬性相同，添加相應的id屬性值
$(ieImageDom).css({
float: 'left',
position:'relative',
overflow:'hidden',
width: '100px',
height: '100px'
}).attr({"id":"view"});
$(proIeImageDom).attr({"id":"biuuu"});
//刪除原有img對象，append創建div的dom對象
porImg.parent().prepend(proIeImageDom);
porImg.remove();
viewImg.parent().append(ieImageDom);
viewImg.remove();
//采用濾鏡效果生成圖片預覽
file.select();
path =document.selection.createRange().text;
$(ieImageDom).css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});
$(proIeImageDom).css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});
// .style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")";//使用濾鏡效果
}

這樣就可以實現一個圖片的在線編輯以及上傳在預覽功能。

要注意，代碼必須要使用客戶端訪問，例如：http://loacalhost/imgpreview/index.html，不要直接點擊index.html訪問

代碼下載

轉自:http://blog.csdn.net/danhuang2012/article/details/7703606