drag and image and browse image when click on image and display it

[unnati1234]

i have developed a drag and clone of image.now in that i want that when click on image it display browse dialog box for browse image from computer.and after selecting image it display on that particular image tag.i am using jquery drag and drop plugin in php.below is my drag and drop code.

javascript:

<script>
 
$(function() {
$( "#accordion" ).accordion();
});
 
    $(".draggable").draggable({
        helper: 'clone'
    });
    $(".drop-zone").droppable({
        accept: '.draggable',
        drop: function(event, ui) {
            var $clone = ui.helper.clone();
            if (!$clone.is('.inside-drop-zone')) {
                $(this).append($clone.addClass('inside-drop-zone').draggable({
                    containment: '.drop-zone'
                }));
 
                $clone.resizable({ //this works but I dont want it to on outside elements
                    helper: "ui-resizable-helper"
                });
 
            }
        }
});
 
</script>

html code:

<img class="draggable" alt="image"/> <div class="drop-zone"> </div>