Как загрузить и просмотреть загруженное изображение с помощью AJAX - PullRequest
Новая
       4

Как загрузить и просмотреть загруженное изображение с помощью AJAX

1 голос
/ 01 февраля 2011

Я создал следующую веб-страницу: 

...
<img alt="" src="images/frame.png" id="contact-image" />
<form enctype="multipart/form-data" action="PHPScripts/upload.php" method="POST">
    <input type="file" id="browseContactImageButton" name="image"
           accept="image/jpg,image/jpeg,image/png,image/gif"
           onchange="this.form.submit();" />
</form>
...

Я хочу иметь возможность загрузить изображение в файловую систему или базу данных (еще не определились) и иметь возможность видеть загруженный файлизображение в <img id="contact-image" /> сразу после загрузки файла, без перезагрузки страницы, то есть с помощью AJAX.

Можете ли вы показать мне концепцию, которой я должен следовать?Я знаю, что я делаю ошибку, позвонив по номеру PHPScripts/upload.php при отправке формы.Я предполагаю, что вместо этого я должен вызвать какую-то функцию javascript, но куда мне идти и как должна выглядеть эта функция?Благодарю.

Ответы [ 5 ]

2 голосов
/ 01 февраля 2011

С MVC или любым другим бэкэндом это довольно просто.Предположим, у вас есть контроллер с именем UploadPicture.Когда веб-сервер завершит загрузку изображения, вы просто заставите сервер вернуть json с путем к изображению или любым другим способом.

Я бы порекомендовал использовать jQuery, поскольку это отличная среда для работы с Javascript и имеет хорошийкросс-браузерная поддержка.

Я делал это раньше, и это было похоже на то, что я описал выше.

Если бы вы узнали путь и имя изображения, то вы бы даже не сталинужно вернуть что-нибудь с сервера.Вы бы просто сделали с jQuery, когда загрузка завершится: 

$("#contact-image img").attr('src', 'http://PathToImage');

И вы можете использовать $ .ajax для запуска после завершения отправки.

Ссылка на $ .ajax - http://api.jquery.com/jQuery.post/

Надеюсь, это поможет.

1 голос
/ 30 октября 2012

Попробуйте загрузить Ajax

Вы можете найти объяснения и примеры здесь:

http://www.zurb.com/playground/ajax_upload

0 голосов
/ 15 февраля 2011

Вот лучшее решение на мой взгляд.Он не включает jQuery и обеспечивает AJAX-подобную функциональность.Спасибо всем, кто приложил усилия, чтобы помочь мне решить эту проблему.Ура!

http://www.articlealley.com/article_573896_81.html

0 голосов
/ 01 февраля 2011

Я предлагаю вам использовать YUI для загрузки файла или JQuery plug in для загрузки файла. После загрузки файла вы можете получить путь к файлу с сервера и обновить его с помощью JS на стороне клиента. 

var imgControl = document.getElementById('image');

imgControl.src = filePathFromServer;

И если вы хотите попробовать что-то новое HTML5 ... я предлагаю взглянуть на это демо .

0 голосов
/ 01 февраля 2011

вы пробовали swfupload ?

вот демоверсия , использующая php

...