Это не так просто сделать, как можно было бы представить, и некоторые браузеры в целях безопасности предотвращают автоматический запуск загрузки файлов из ненадежных элементов.
Я рекомендую использовать сторонний плагин для загрузки файлов, такой как Plupload , или подделать пользовательскую кнопку с помощью прогрессивного улучшения (невидимая кнопка загрузки файла, с пользовательской графикой под ней (конечно, не самая гибкая решений), как описано здесь:
http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/
События Plupload позволяют вам подключаться к событиям, которые могут произойти во время загрузки ajax-файла, и делать что-то с информацией о загрузке. Смотрите эту страницу с примерами того, какие данные ответа вы можете получить:
http://www.plupload.com/example_events.php
Вы можете получить данные ответа следующим образом:
id=p16in5el9ne2fc1rd08120in081
name=denim.png
size=20623
loaded=20623
percent=100
status=DONE
target_name=p16in5el9ne2fc1rd08120in081.png
И, конечно, вы можете изменить то, что сервер возвращает при успешной загрузке, чтобы иметь возможность получить полный абсолютный URL для загруженного изображения.
Получив эти данные, вы можете подключить их и переключить изображение, выполнив что-то вроде этого (с помощью jQuery):
// Called when a file has finished uploading
FileUploaded: function(up, file, info) {
$('#id_of_the_image').attr('src', 'uploads/' + file.target_name);
}