How to send a file and a text field with a form and process the json response?

How to send a file and a text field with a form and process the json response?

Hello I am a rookie using jquery, and I took a couple of days trying to get upload a file, but do not know. I have read a lot of manuals and have tried a lot of plugins that I found on google, but not having much idea I could achieve my goal 


My goal is to send a form with two fields: a picture and a key, to http://www.dumpyourphoto.com/api/upload_photo/json. This website will give me back a reply with the url of the photo that is what I have to deal.


I've failed with this
  1. <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2jquery.js"></script>
    <script type="text/javascript">
    $(function() { 
        $('#my-form').submit( function() { 
    $.post(' http://www.dumpyourphoto.com/api/upload_photo/json', 
    { key: $('input[name="key"]').val(), photo: $('input[name="photo[]"]'). val() }, function(data) {
    $('img#photo').attr('src', data.sources.large);
    });
            return false; 
        });
    });
    </script>

    <img src="" alt="" id="photo" />

    <div id="container">
    <form action="" method="post" id="my-form" enctype="multipart/form-data">
    <input type="hidden" name="key" value="f******** 394b195d4e04e90711df3bc61" />
    <input id="file" type="file" name="photo[]" />
    <input type="submit" name="submit" value="Submit" />
    </form>
    </div>
From what I've been reading is not possible to do what I want with the function $. post (), how can I do?

Thank you for all and best regards.