none
Mostrar imagen de un input y enviarla a un metodo RRS feed

  • Pregunta

  • Hola, se que el titulo no es muy descriptivo pero le cuento mi problema. Estoy en un proyecto asp.net mvc3 con c#. Tengo un input file que esta en un formulario y lo paso a un metodo que recibe un httppostedfile, hasta ahi todo bien.

    Ahora debo hacer que cuando se abra el input y seleccione la imagen se abra una ventana (estoy usando simplemodal de jquery) con la imagen (redimensionada) y otros campos. Tambien debe tener un boton que llame al metodo y ademas de pasarle la imagen que deberia seguir siendo un httppostedfile tambien pasarle los otros campos. Obviamente el metodo lo modifico para que reciba los otros metodos.

    Lo que no se como hacer es, primero mostrar la imagen en esa nueva ventana y luego al hacer click en el boton se ejecute este metodo y pasarle la imagen que debe seguir siendo un httppostedfile.

    Lo que busco seria algo parecido a lo que hace facebook cuando subis una foto, que despues del input te mando a una pagina en la que le pones un titulo y de ahi la publicas, a excepcion de que yo despues del input la mandaria a una ventana (simplemodal de jquery) y ahi la publico.
    • Editado dario83 viernes, 4 de enero de 2013 19:17
    viernes, 4 de enero de 2013 18:20

Todas las respuestas

  • Buenas!

    Lo que pides entiendo que es una previsualización de la imagen antes de enviarla al servidor. Si requieres eso, la forma más sencilla es usar FileAPIde HTML5. Está soportada en todos los navegadores modernos así que no debes sufrir en cuanto a compatibilidad. Con FileAPI podrás leer la imagen, mostrarla en un tag <img>. Si además quieres modificarla puedes usar un <canvas /> y luego enviar la imagen modificada al servidor.

    No hace mucho hice un post titulado "Crea tu propio Instagram" donde muestro:

    1. Como cargar una imagen usando FileAPI
    2. Como ponerla en un <canvas /> y modificarla
    3. Como enviarla al servidor usando Ajax.

    Además en este post muestro también como usar el objeto javascript FormData para enviar los datos del fichero y datos adicionales (como un nombre p.ej).

    Espero que te sirva!

    El único tema del post es que yo uso drag-and-drop para cargar la imagen (es decir el usuario hace drop de una imagen que tenga en local). Si quieres usar un <input type="file" /> para seleccionar la imagen el código es muy parecido, pero debes suscribirte al evento change del input y alli usar la propiedad files del input. En otro post anterior (HTML5 File Api) muestro como usar un <input type="file" /> para cargar un fichero y si es una imagen previsualizarlo. También echa un vistazo a otro post (Upload de ficheros con Ajax y File Api) donde muestro como hacer un upload de un fichero cargado con FileApi hacia el servidor (mostrando además una barra de progreso). Si la imagen la tienes en un <canvas /> porque la has modificado entonces el método de upload de este post no te sirve (pero en el primero que te he mencionado tienes como hacerlo en este caso).

    Entre esos 3 posts deberías tener toda la info para hacer lo que pides! :D

    Saludos!


    Eduard Tomàs Blog: http://geeks.ms/blogs/etomas -- Twitter: eiximenis

    • Propuesto como respuesta Nicoloco domingo, 13 de enero de 2013 22:26
    miércoles, 9 de enero de 2013 8:08
  • Muchas gracias, lo voy a probar.
    miércoles, 9 de enero de 2013 13:19