Кнопка загрузки изображения div

Question

Как превратить div с id "uploadWrapper" из этого jsFiddle в кнопку, которая может загружать изображения - в основном, то же самое, что и <input type="file">. Заранее спасибо.

EDIT - БЛАГОДАРЯ ОТВЕТЫ, ПОЛУЧЕННЫЕ

Как я могу показать предварительный просмотр изображения в месте DIV с синим фоном, когда кто-то загружает изображение, посмотреть jsFiddle

Answer 1

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

Я рекомендую использовать сторонний плагин для загрузки файлов, такой как 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); 
} 

Answer 2

Вы не можете, если не используете Flash, Silverlight или объект Active-X. Браузеры блокируют все операции просмотра файлов.

Возможно, вы можете сделать это, сделав <input type="file" /> невидимым, но с нажатием кнопки, чтобы пользователь, нажав кнопку «кнопку», на самом деле нажал кнопку input.

UPDATE:

В ответ на ваш второй вопрос, чтобы просмотреть изображение, вам нужно будет отправить его на сервер, а затем указать ваши img «ы src на пути изображения на вашем сервере.

Answer 3

Проверить эту скрипку: http://jsfiddle.net/techfoobar/kM9aa/1/

Preview: Как Джастин Сатир сказал , нет возможности использовать план HTML/JS для предварительного просмотра выбранного изображения, если вы не загрузите его на свой сервер и не используете URL загруженного изображения.