Pantalla de PHP Imagen elegida antes de subir

Question

Estoy usando la biblioteca de carga de Codeigniter para cargar imágenes para avatares de usuario. También estoy usando Jcrop que permite a los usuarios seleccionar un área para recortar.

http://www.webresourcesource.com/wp-content/uploads/2012/04/jcrop.jpg

Estoy ahorrando todas las coordenadas de la zona seleccionada en las entradas de texto que voy a utilizar en php recortar.

¿Es posible visualizar la imagen seleccionada antes de cargar?

Subir formulario:

<?php echo form_open_multipart('upload/do_upload');?> 

<input type="file" name="userfile" size="20" /> 

<input type="submit" value="upload" /> 

</form> 

Si es posible que estoy tratando de evitar js pesados ​​de este o de subir 2 veces. Al elegir un archivo noto que muestra el nombre de la misma:

¿Hay una manera de utilizar esa funcionalidad para recuperar la ruta de la imagen, así (ruta de la imagen en el ordenador del cargador)? En teoría, podré usar eso en etiquetas de imagen y mostrar la imagen sin js.

Answer 1

Para que quede claro, no se está cargando el archivo dos veces en la solución actual, ¿verdad? Solo debe subir una vez, almacenarla en una ubicación temporal, mostrarla en la página de recorte y luego volver a enviar los parámetros de recorte a la segunda acción.

Tradicionalmente, no ha habido forma de acceder al contenido de un archivo o al valor del formulario de carga de archivos. Existiría un riesgo de seguridad al permitir que una página web conozca la estructura de su sistema de archivos. (¿Estás en Windows, en una cuenta de administrador, ...?) Hace siglos, podrías hacer esto, pero nos hicimos sabios.

The File API introduced in HTML5 hace posible el acceso a los archivos sin revelar esta información, y hay algunas opciones interesantes disponibles en la aplicación del lado del cliente, las claves son la propiedad files de un archivo de entrada y URL.createObjectURL.

Cuando cambia un formulario, se expone una representación interna del archivo (s) en la entrada usando fileInput.files que es un objeto FileList. Existen API donde puede leer los bytes pero desea establecerlos como fuente de una imagen.

Como un archivo no es una URL, URL.createObjectURL crea una URL virtual alrededor del archivo que solo puede usar su página y los iframes de mismo origen. Ajuste la imagen para esto, entonces onload, revocar la URL y dar comienzo a su jQuery plugin de cultivo:

input.addEventListener('change', function() { 
    preview.src = URL.createObjectURL(this.files[0]); 
}); 

preview.addEventListener('load', function() { 
    URL.revokeObjectURL(this.src); 

    alert('jQuery code here. Src: ' + this.src + ', W: ' + this.width + ', H: ' + this.height); 
}); 

probar this jsFiddle en al menos Chrome y Firefox. Evidentemente, esto no es una solución para todos los navegadores, pero es una excelente manera de mejorarlo para los navegadores que sí lo admiten.

Answer 2

Podrías hacerlo usando css (http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html), pero va a ser increíblemente difícil de integrar con jcrop ...

Recomendaría solo hacer que el usuario espere hasta que se haya cargado. Eso es lo que hacen Facebook y la mayoría de los otros sitios web que permiten el recorte.

En cualquier caso, no aceleraría el proceso de carga, por lo que no hay mucho motivo para hacerlo.

No se puede obtener el archivo completo. Sería un problema de seguridad: http://forums.asp.net/t/1077850.aspx/1

Answer 3

Bueno, puede utilizar otra biblioteca de recorte que viene con una vista previa como la que tiene una defusión.

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/