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 two effects (under FF):
1, select Upload Image area
2, upload the image to the IMG tag
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 ~
V. Determination of the Preservation
Here the logic is much simpler, select the picture area when we generated the picture output to the page, where we can use the same method to generate pictures, save on OK, there is a clean-up operation,
The end of the 123.jpg is useless, 123.jpg.view.jpg is useless, useful is that we draw from the 123.jpg.view.jpg from 132.jpg 456.jpg!
Six, the entire function in an HTML, where to use, on the load to where!
$ (function () {
$ ("#divUp"). Load ("uploadavatar.htm?n=" + math.random ());
})
function onavataruploaded (file) {
$ ("#img"). attr ("src", file + "n=" + math.random ()); Prevent caching
}
<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 the steps are over.
The function does not have the powerful flash, but the general upload avatar also may satisfy, wants to produce the head portrait thumbnail is also very simple, the following will attach the source code, looked that knew where added.
