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

摘要本人個人nodejs分享論壇：tnodejs.com參考：http://blog.csdn.net/nhconch/article/details/7295456

需要解決的問題有：本地圖片如何在上傳前預覽、編輯；
最近發現這個功能很多是基於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>

代碼1-1

為了修改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

代碼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

代碼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]);}//如果是IE瀏覽器，採用濾鏡效果，進行顯示，但特別注意的是該濾鏡效果使用的對象是div對象，並非img對象，因此我們需要將原有的img對象remove同時產生新的div對象，並且賦值相應的class和idelse{//建立需要濾鏡顯示的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訪問

代碼下載