JavaScript implementation Flash upload Avatar

Flash upload more than a picture, can be JS imitation flash see not much, but also the work needs, try to write and read! And behold, the idea is really workable.

First look at the effect chart (under FF):

Here's my whole idea:

First, use ajaxfileupload.js to upload pictures asynchronously. This is not much to say, it is very simple things.

Second, div drag and drop with Jquery-ui. This is not much to say.

Third, upload the image processing.

The edit container is 300*300, and if the picture is not within 300*300, a maxheight=300,maxwidth=300 thumbnail will be generated here,

For setting the background of the editing container, if the original file is 123.jpg, the file generated here is 123.jpg.view.jpg, of course, the file 123.jpg.view.jpg may not be generated!

The return data is {result: "+ result +", size: "+ size +", msg: "" + msg + "", W: "+ ww +", H: "+ hh +"} ".

Result is 1 or 0, whether the table is uploaded successfully,

Size is the scaling ratio, default is 1, there are thumbnails when the magnification is reduced, if the thumbnail to the original 3/4,size 0.75

msg If result=1,msg is a file address, if RESULT=0,MSG is an error message

W,h is the height of the original image, and if there is a thumbnail, the thumbnail is wide.

Four, select the picture area

Avatar target size is 175*175 and is displayed on the right when edited. The target avatar to move with the selection of the movement, this can be positioned to achieve the background, but it will also vary with the size of the constituency changes, this use of the background I am afraid it is difficult to achieve it!

Anyway, I don't know how to do it, so I choose to use the real picture here, but where does the picture come from? From the service side! Presumably the image verification code everyone is familiar with, the real picture here is this. After the drag and resize of the constituency (of course you can also

In the case of the request, the effect is more dynamic, but hey hei ... , that is, to request a picture displayed to the server at stop, request the data to contain size, which is the 0.75 above, and the location and size of the selection.

When you get to the server, you'll find that the location (x,y) and size (w,h) of the selections are for thumbnails, at this time size is useful, by the size of the abbreviation, by size reduction, really Jia Ling still need to be the x,y,w,h, the size, get the position and urine corresponding to the original. So, cut it! Come back! All right, cut it, return to @#!. , dizzy, here still can't return! Because after the cut, you don't know if the size fits.

Our target size (175*175) Ah! So here can not hurry to return to the user to see, but also to do the final packaging, the large compression, the small amplification, all into 175*175 after the standard can be returned. So

We can see the picture of our constituency on the page ~

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/