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 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.

回答1:

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

来源：https://stackoverflow.com/questions/7628095/how-do-i-use-to-drag-an-imageimage-url-only-into-the-droppable-area-to-upload