JavaScript實現仿flash上傳頭像

flash上傳頭像多不勝舉了，可JS仿flash的見的不多，也是工作需要，就試著寫寫看！不料，設想還真的可行

先看效果圖(在FF下)：

下面是我整個的思路：

一、用ajaxFileUpload.js非同步上傳圖片。這個不用多說了，挺簡單的東西。

二、div拖拽用jquery-ui。這個也不多說了。

三、上傳過圖片的處理。

編輯容器是300*300，如果圖片不在300*300之內，這裡會產生一個maxHeight=300，maxWidth=300的縮圖，

用於設定編輯容器的背景，如果原檔案為123.jpg,這裡產生的檔案為123.jpg.view.jpg，當然，檔案123.jpg.view.jpg可能不會產生！

返回資料為{ result:" + result + ",size:" + size + ",msg:"" + msg + "",w:" + ww + ",h:" + hh + "}"。

result 是1或0,表是否上傳成功，

size 是縮放比率，預設為1，有縮圖時為縮小的倍數，如果縮減到原來的3/4，size為0.75

msg 如果result=1，msg是檔案地址，如果result=0，msg是錯誤資訊

w,h是原圖的寬高，如果有縮圖，則為縮圖的寬高。

四、選擇圖片地區

頭像目標大小為175*175，編輯時在右邊顯示。目標題像要隨選區的移動而移動，這個可以定位背景要實現，但它還要隨選區的大小變化而變化，這個用背景恐怕是難以實現了吧！

反正我是不知道怎麼做，所以這裡選擇用真正的圖片，可圖片從哪來呢？從服務端來！想必圖片驗證碼大家都熟悉，這裡的真正圖片就是這樣得來的。在選區drag和resize後（當然也可

在進行時請求，效果更動態，不過嘿嘿...），即 stop時要向伺服器請求顯示的圖片，請求資料要包含size，即上面得到的0.75，還有選區的位置和大小。

到伺服器後你會發現選區的位置(x,y)和大小(w,h)是針對縮圖的，這時size就有用了，由size縮減，由size還原，真是解玲還需系玲人啊，把x,y,w,h都除以size,得到的位置和大小便對應到原圖上了。於是乎，剪下吧！返回吧！好，剪下，返@#！，暈，這裡還不能返回呢!因為剪下過後你也不知道大小是不是符合

我們的目標大小(175*175)啊! 所以這裡不能急著返回給使用者看，還要做最後的封裝，把大的壓縮，把小的放大，統統成175*175達標後才可返回。於是，

頁面上就可以看到我們選區的頭像了~

查看本欄目更多精彩內容：http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/