Arrastrar y soltar imagen en un formulario web

Tenemos una página web (HTML javascript y PHP en su mayoría) que permite a un usuario subir una imagen. Tenemos el botón de navegación normal, y funciona bien. Sin embargo, queremos agregar la funcionalidad para arrastrar y soltar una imagen en el campo de texto.Arrastrar y soltar imagen en un formulario web

gmail le permite hacer esto en su aplicación de correo, por lo que es posible. La única forma en que pensamos hacerlo es crear un applet Java que haga todo esto, pero eso termina siendo muy desordenado.

¿Ononone ha hecho esto? ¿como funciona?

Editar: Estoy usando firefox en una Mac. La mayoría de mis usuarios probablemente usará IE en Windows.

gracias

Fuente

2009-02-18 Brian Postow

He intentado arrastrar una imagen de goteo y su editor. Recogerá la ruta si el archivo está en una página web, pero si está en su disco local, la ruta será "file: // c: ....", que no se cargará con el mensaje y lo hará terminar como una imagen rota.

El navegador no tiene acceso al sistema de archivos local, por razones de seguridad, así que dudo que esto funcione alguna vez de la manera que usted describe.

Fuente

2009-02-18 21:43:36

no en gmail si arrastra una imagen al texto, lo incluye en el correo electrónico. No estoy seguro de cómo lo hacen, pero es solo una caja con un punto rojo hasta que lo envíe ... –

Especifique su navegador –

Dejar caer un archivo en un campo de entrada normal copiará la ruta local a la imagen en el campo de entrada, sin embargo, esto no sirve para nada a usted ya que la propiedad de un .value < input type = 'archivo' La etiqueta > es de solo lectura por razones de seguridad.

Notarás que gmail solo te permite arrastrar/soltar una imagen (para subirla) a la entrada < type = 'file' > input y no a ningún otro campo.

Creo que lo que quiere preguntar es "how do I style a <input type='file'> tag like google", que es un tema totalmente distinto.

EDIT: Ok en IE no puede arrastrar un archivo a un tipo de entrada = < 'archivo' > etiqueta

Fuente

2009-02-18 21:39:34

para mí (en un Mac por lo menos). Cuando arrastro una imagen a un campo de texto (para cargar una imagen de usuario, por ejemplo), el navegador carga la imagen como la ventana completa, o no hace nada ... –

ingrese un nuevo correo electrónico y haga clic en "adjuntar un archivo" y luego arrastre un archivo al texto que dice "No se seleccionó ningún archivo" y vea si funciona. Puede ser específico del navegador. –

no, solo estaba arrastrando hacia el área de texto gigante. –

Puede hacer esto en XUL (convirtiéndolo efectivamente en una solución solo para Firefox) o en ActiveX (una solución solo para IE).

Fuente

2009-02-18 21:57:27 troelskn

la mejor manera de hacer esto es hacer un independiente Adobe AIR como el cargador de fotos para https://www.photoshop.com/express

puede encontrar una gran información en este mensaje: http://devzone.zend.com/article/3650-Desktop-Image-Uploaders-Using-Adobe-AIR-and-JavaScript

Fuente

2009-02-19 11:18:46 Fortes

creo que tener una manera de evitar los molestos y molestos sistemas de archivos locales FF3, pero necesito un javascript para probar. ¿Cómo leo la ruta del archivo local desde el formulario de carga de archivos? Por favor, deténganse con el 'flash es una solución'. Soy un desarrollador Flash de oficio e incluso no creo que sea una buena solución.

Fuente

2009-02-21 00:34:50

¿Tiene por casualidad la extensión de Firefox instalada?

http://www.teslacore.it/wiki/index.php?title=DragDropUpload

Me sorprendería si hay una solución sin tener que instalar un plugin externo o extensión. Como alguien mencionó eso sería un problema de seguridad. Un sitio web podría tomar archivos de las computadoras de las personas y subirlos sin su conocimiento.

Fuente

2009-02-21 01:09:07 dtc

Eche un vistazo a SWELL Framework. Está basado en javascript.

Fuente

2010-04-16 14:14:55 Rhepungus