How do I use to drag an image(image url only) into the droppable area to upload to the server using jquery or ajax?

I want to upload an image to server through an image url. this image is dragged and dropped to a droppable area. (Or is there a way to post the Image URL to another page in the javascript function?)

How do I use this image in the droppable area to upload to the server using jquery or ajax.

Like once I dropped the image then it will automatically upload to the server by using the image url(e.g http://dfghg.com/sss.jpg).

the image (e.g http://dfghg.com/sss.jpg) is within开发者_Go百科 the the same page as the drop area.

heres my code

$("#query_image_container").droppable({
        accept: ".thumb",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
            $(this).find(".thumb").remove();

                        $(this).append('<img class="thumb"  src="'+ui.draggable.attr('src')+'">');
            var imageurl = ui.draggable.attr('src');
                $.ajax({
                    type: 'POST',
                    url: 'uploadurl.php',
                    data: imageurl,
                    success:function()
                        {
                        }
                    datatype: 'html'
                });
        }

    });

can I use $.ajax({...}); within a droppable?

Or is there any other way i can do a POST to uploadurl.php with the "data : imageurl" ?

the idea is to drag an image(image on the same webpage) to the drop area and it will auto upload to the server.

You might wont to dig deeper into fileuploadarea, this seems to be doing pretty much what you want.