Загрузка изображения - отображение изображения на веб-странице до нажатия кнопки Отправить.

Question

Чтобы лучше изучить веб-разработку, я пытаюсь написать страницу PHP, которая позволит мне загружать и скачивать файлы с сервера, что я делал ранее в ASP.

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

Вот довольно стандартный код для просмотра / отправки:

<form enctype="multipart/form-data" action="uploadFile.php" method="POST"/>  
<input type="hidden" name="MAX_FILE_SIZE" value="500000" />  
<input type="file" name="pix" size="100" />  
</form>

Теперь, когда вы нажмете кнопку «Обзор ...» на получившейся веб-странице, вы получите стандартный диалог файла, а затем вернетесь на страницу с правильным путем к файлу в текстовом поле. (И, когда я нажимаю «Отправить», мой uploadfile.php прекрасно работает.)

Что я хотел бы сделать, так это на самом деле ПОКАЗАТЬ пользователю (ну, мне) изображение на веб-странице, если это файл, подходящий для IMG, или же изображение-заполнитель для файлов, не относящихся к изображениям - ДО того, как пользователь нажмет кнопка ОТПРАВИТЬ.

Обратите внимание, что правильный путь к файлу на стороне клиента - ПРАВИЛЬНО на странице. Я не могу на всю жизнь выяснить, как захватить его из DOM, или в этом отношении выяснить, как заставить JavaScript замечать возвращаемый с правильным путем путь, чтобы вызвать показ изображения.

(Я прошу прощения за широту этого вопроса - я попытался немного поискать здесь предыдущие вопросы и ответы, но когда мне не хватает, возможно, не только технических терминов, но и КОНЦЕПЦИЙ, трудно сформулировать вопрос .)

Answer 1

Вы можете сделать это с Firefox и другими браузерами, которые поддерживают FileList API.

var myImage = new Image(),
myImage.src = myFileInput.files[0].getAsDataURL();

Редактировать: максимальный размер файла не должен указываться на стороне клиента, так как его можно использовать, но вы можете по крайней мере проверить его на стороне клиента, используя files[0].getAsBinary().length.

Answer 2

Вы можете сделать это только с Flash.

Google что-то вроде "загрузка флеш-изображения с предварительным просмотром"

Answer 3

Подумайте о том, что вы просите. Если веб-страница может загружать произвольные файлы из вашей (не серверной) файловой системы, что может помешать ей отправлять ваши личные данные на любой вредоносный веб-сайт?

Answer 4

Вы можете использовать Ajax для отправки формы в фоновом режиме и сохранения файла изображения во временный каталог. Затем попытайтесь показать его на странице, изменив атрибут src элемента img. Когда пользователь, наконец, нажмет кнопку «Отправить», скопируйте изображение в его конечный пункт назначения. Если он отменяет или просматривает - удалите файл.

Answer 5

Если вы ищете решение не из IE (включая IE 9), это может быть решение. (Конечно с твиками) http://www.html5rocks.com/en/tutorials/file/dndfiles/

В противном случае вы должны загрузить и получить путь с сервера для отображения эскиза или предварительного просмотра. Есть другие способы, такие как flash / java / silverlight, которые работают в большинстве браузеров, но все еще не являются чисто веб-решением.

Answer 6

Это правда, что нет единого решения вашей проблемы. Но в текущем состоянии сети лучший способ сделать это - Flash. См. Этот пост с практическими рекомендациями . Flash является проприетарным решением, но оно реализовано на 98% + всех компьютеров, так что это безопасное решение. Просто убедитесь, что вы реализуете его в соответствии с методологией постепенного улучшения / постепенного ухудшения качества.

Вы можете сделать это с помощью java-апплета, он широко доступен и не является проприетарным, но мне это кажется излишним (но я не Java-разработчик).

Silverlight? Ну, попрощайтесь с большинством ваших пользователей. Насколько я знаю, это далеко не так широко доступно. Поэтому людям нужно будет установить плагин, чтобы они могли видеть ваш пользовательский интерфейс. Хотя в некоторых случаях это может быть нормально (интрасети, фиксированный набор машин, которые вы можете настроить самостоятельно и т. Д.).

Преимущество решения на основе ajax состоит в том, что оно не основано на проприетарных технологиях, а означает загрузку файла на сервер, поэтому в вашем случае это не решение, так как для больших изображений это займет довольно много времени, и это больше не будет предварительным просмотром, верно?