[Original] JS upload avatar, imitation flash

There are a lot of questions about how to upload an avatar in flash. I don't know much about js-like flash. It's also a work requirement. I just want to write it! Unexpectedly, the assumption is true.

First read (under ff ):

 

The following is my overall idea:

1. Use ajaxfileupload. js to upload images asynchronously. This is simple.

 

2. Drag and Drop a div using jquery-UI. This is not much to say.

 

3. Process uploaded images.

The editing container is 300*300. If the image is not within 300*300, a thumbnail with maxheight = 300 and maxwidth = 300 is generated,

Token may not be generated!

The returned 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 zoom ratio. The default value is 1. It is a zoom-in multiple when a thumbnail is available. If it is scaled down to 3/4, the size is 0.75.

MSG if result = 1, MSG is the file address, and if result = 0, MSG is the error message

W and H are the width and height of the source image. If there is a thumbnail, It is the width and height of the thumbnail.

 

4. Select the image area

The Avatar's target size is 175*175, which is displayed on the right when being edited. The target profile picture needs to move along with the selection area. This can be used to locate the background, but it also needs to change along with the size of the selection area. I am afraid this background is difficult to implement!

I don't know how to do it, so here I choose to use real images. Where can I find the images? From the server! I think everyone is familiar with the image verification code. The real image here is like this. After drag and resize (of course

When the request is in the input row, the effect is more dynamic, but hey ...), that is, the image to be displayed to the server during the stop operation. The requested data must contain the size, that is, the above 0.75, and the location and size of the selected area.

After arriving at the server, you will find that the position (x, y) and size (W, H) of the selection area are for thumbnails. In this case, the size is useful, which is reduced by the size and restored by the size, actually, Jie Ling still needs to be a ling man. Divide X, Y, W, and h by the size, and the obtained Location corresponds to the source image. So, cut it! Return! OK, cut, return @#!, Dizzy. It cannot be returned here! Because after the cut, you do not know whether the size is consistent

Our target size (175*175! Therefore, we cannot rush back to the user here. We need to make the final packaging, compress the large data, and enlarge the small data to 175*175. So,

The avatar of our constituency is displayed on the page ~

 

5. Confirm to save

The logic here is much simpler. When we select the image area, we generate the image and output it to the page. Here we can generate the image in the same way and save it as OK. Here we also have a cleanup operation,

Success!

 

6. Place the entire function in an HTML file. If it is used, load it wherever it is!

JS:

$ (Function (){
$ ("# Divup"). Load ("uploadavatar.htm? N ="   + Math. Random ());
})
Function onavataruploaded (File ){
$ ("# IMG"). ATTR ("src", file +   "? N ="   + Math. Random (); // prevents caching
}

HTML:

<Div style = "height: 500px; clear: Both; margin: 80px auto; width: 800px;">
<Div style = "width: 175px; Height: 175px; float: Left; Border: 1px solid # CCC;">
  />
</Div>
<Div id = "divup" style = "width: 520px; float: Left; margin-left: 20px">
</Div>
</Div>

 

*******************

The general idea and steps are complete.

The function is not as powerful as flash, but the normal upload of the Avatar can also be satisfied, it is also very easy to generate a thumbnail of the Avatar, the following will be included in the source code, you can see where to add.

HandlerCodeIt's a bit messy. I'm sorry!

Download