Загрузите изображение и обновите div новым изображением

Question

У меня есть следующий код

<div id=form>
    <div id=viewimage>
        <img src="placeholder.png">
    </div>
    <div id=upload>
        <form action="upload.php" method=POST enctype="multipart/form-data">
            <input type=file name=image>
            <input type=submit value=Upload>
        </form>
    </div>
</div>

Мне нужно загрузить изображение, а затем обновить #viewimage div с добавленным изображением. Когда форма отправляется, upload.php вернет имя загруженного файла. Я думаю, что это вопрос ajax, но я полный нуб, когда дело доходит до ajax / javascript, поэтому у меня нет ни малейшего представления, как действовать.

Answer 1

Если вы хотите сделать это в ajax, вы должны поместить свою форму в iframe, поэтому, когда вы загружаете изображение, только небольшая часть страницы (форма) отправляется на ваш сервер.

После этого вы можете использовать ответ upload.php, чтобы получить имя и путь к загруженному изображению, а затем вы можете просто изменить src тега img.