перетаскивая значок файлов с помощью JavaScript

Question

Я хочу получить изображение значка, когда пользователь перетаскивает его поверх какого-либо элемента div, но чтобы оно точно показывало то, что видит пользователь (например, thumbnail, * .ico), возможно ли это сделать , или кто-нибудь знает какие-либо проекты, которые делают подобные вещи?

Спасибо, высоко ценится.

Answer 1

Я бы предложил смесь:

Эта великолепная библиотека для перетаскивания файлов: http://valums.com/ajax-upload/

Этот код JavaScript для предварительного просмотра загруженных изображений перед их загрузкой. Как загрузить изображение для предварительного просмотра перед загрузкой через JavaScript

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

Получить локальный путь к изображению с помощью javascript - непростая задача ... и сделать это при поддержке большинства браузеров будет еще хуже ...

Более простым способом решения вашей проблемы было бы загрузить изображение во временную папку на вашем сервере, вернуть этот временный путь и отобразить только что загруженное изображение. Затем вы добавляете вторую кнопку «Сохранить» и кнопку «Отменить», которая сохраняет загруженное изображение в реальный путь, если пользователю нравится то, что он загрузил, и вы удаляете временное изображение. Поскольку ваши изображения имеют формат .ico, я предполагаю, что они не очень большие файлы, поэтому они будут загружаться довольно быстро, и пользователь также получит быстрый «предварительный просмотр», используя эту технику.

Вы должны спросить себя, все ли время, потраченное на настройку кода, чтобы показать пользователю предварительный просмотр перед загрузкой, действительно улучшает работу пользователя с вашим инструментом!

Answer 2

Может потребоваться дополнительная работа для преобразования файлов ico в форматы файлов, доступные для просмотра в браузерах (например, JPEG, PNG.)

• Перетаскивание изображений в браузер возможно, если вы используете HTML5Drag and Drop API.(https://developer.mozilla.org/en/DragDrop/Drag_and_Drop, http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/).
• После захвата пользовательского ввода вы можете загрузить изображения на свой сервер. После этого вы можете конвертировать изображения так, как вы хотите. Наконец, вы можете показатьизображения для пользователей.

Answer 3

Я не знаю, хотите ли вы использовать html5, но я думаю, что с jQuery вы можете сделать это. Я нашел этот URL: http://decafbad.com/2009/07/drag-and-drop/api-demos.html#data_transfer

Здесь у вас есть «Использование изображений с обратной связью», возможно, это может помочь вам :)

Answer 4

Вот отличный учебник, который, я думаю, может помочь вам со многими проблемами.Если я правильно понял вашу проблему.http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/