使用Javascript获取拖放文件图标

Getting drag and dropped files icon using Javascript

本文关键字：文件 图标 拖放 获取 Javascript 使用      更新时间：2023-09-26

我想得到一个图标的图像，当一个用户拖放它在某种div，但它会显示到底什么用户看到(例如缩略图，*.ico)，是可能这样做，或者有人知道任何项目做类似的事情?

我建议混合使用:

这个伟大的拖放上传库:http://valums.com/ajax-upload/

这个javascript代码用于在上传之前预览上传的图像如何在上传前通过JavaScript上传预览图片

您必须在Valum的上传器中添加一个侦听器来获取正在上传的文件，然后使用第二个链接中的代码显示它。

通过javascript获取本地图像路径不是一件容易的事…而能够在支持大多数浏览器的同时做到这一点将是更糟糕的…

解决这个问题的一个更简单的方法是将图像上传到服务器的临时位置，返回该临时路径并显示刚刚上传的图像。然后，您添加第二个"保留"answers"丢弃"按钮，如果用户喜欢他上传的内容，则将上传的图像保存到真实路径，并删除临时图像。因为你的图片是。ico，我认为它们不是真正的大文件，所以它们会上传得很快，用户也会使用这种技术快速获得"预览"。

你应该问问自己，在上传之前花时间调整代码向用户展示预览是否真的改善了用户使用你的工具的体验!

你可能需要一些额外的工作来将ico文件转换为浏览器中可查看的文件格式(例如，JPEG, PNG)

  • 如果你使用HTML5的拖放API，可以将图像拖放到浏览器中。(https://developer.mozilla.org/en/DragDrop/Drag_and_Drop, http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/)。
  • 捕获用户输入后，可以将图像上传到服务器。之后，您可以将图像转换为任何您想要的图像。最后，您可以向用户显示图像。

这是一个很好的教程，我认为可以帮助你解决很多问题。如果我没理解错的话。http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/


我不知道你是否想用html5，但我认为用jQuery你可以做到。我找到了这个url: http://decafbad.com/2009/07/drag-and-drop/api-demos.html#data_transfer

这里你有一个"使用拖动反馈图像"，也许这可以帮助你:)

相关文章：