Getting drag and dropped files icon using Javascript

I want to get an icon's image when a 开发者_运维问答user drags and drops it over some kind of div, but that it'll show exactly what the user sees (e.g. thumbnail, *.ico), is it possible to do so, or does anyone know of any projects that do similar things?

I would suggest a mix of:

This great drag and drop upload library: http://valums.com/ajax-upload/

This javascript code to preview uploaded images before they upload How to upload preview image before upload through JavaScript

You would have to add a listener in Valum's uploader to get the file that is being uploaded and then display it using the code in the second link.

Getting the local image path via javascript is not an easy task... and being able to do that while supporting most browsers will be even worst...

An easier way to solve your problem would be to upload the image in a temporary location on your server, return that temporary path and display the image that was just uploaded. Then you add a second "Keep" and a "Discard" button that saves the uploaded image to a real path if the user likes what he uploaded and you delete the temporary image. Since your images are .ico, I assume they are not really big files, so they would upload pretty fast and the user would get a "preview" fast too using that technique.

You should ask yourself if all the time invested on tweaking your code to show the user a preview before the upload really improves the user's experience using your tool !

You may need some extra work for converting ico files to file formats viewable in browsers (e.g., JPEG, PNG.)

• Drag and drop the images to the browser is possible if you use HTML5's Drag and Drop API. (https://developer.mozilla.org/en/DragDrop/Drag_and_Drop, http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/).
• After capturing the user input, you can upload the images to your server. After that you can convert the images whatever you want them to be. Finally you can show the images to the users.

Here is a great tutorial that I think can help you with many problems. If I understood your problem right. http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

I don't know if you want to use html5, but I think that with jQuery you can do that. I've found this url: http://decafbad.com/2009/07/drag-and-drop/api-demos.html#data_transfer

Here you've a "Using drag feedback images", maybe this can help to you :)