Tengo una etiqueta de entrada en un formulario para la selección de las imágenes a cargar.

<div id="lowresDemo">
    <img src="some-url" />
</div>
<input type="file" id="FileToUpload" name="FileToUpload" />

He intentado cambiar la miniatura se muestra en el formulario junto a la entrada a afirmar al usuario de que su selección fue la intención con el siguiente código jquery:

$('#FileToUpload').change(function () {
    $('#lowresDemo img').attr('src', $(this).val());
});

…esto no funciona en cualquier navegador, para la seguridad del navegador las razones por las que me beleieve (como recuerdo de la última vez que hice algo como esto años atrás).

PREGUNTA:
Es allí una manera de presentar al usuario la elección de la imagen antes de enviar el formulario, y no sólo la ruta+nombre del valor en el campo de entrada, pero una miniatura que muestra el archivo que ha seleccionado?

O navegador moderno de seguridad prevenir esto?

OriginalEl autor Faust | 2011-06-06

2 Comentarios

  1. 41

    Es posible con la API de Archivo (es decir, no admite el Archivo API)

    <input type="file">
    <script type="text/javascript">
        $(document).ready(function() {
        $("input").change(function(e) {
    
        for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
            var file = e.originalEvent.srcElement.files[i];
    
            var img = document.createElement("img");
            var reader = new FileReader();
            reader.onloadend = function() {
                img.src = reader.result;
            }
            reader.readAsDataURL(file);
            $("input").after(img);
        }
    });
        });
    </script>

    De trabajo ejemplo: http://jsfiddle.net/ugPDx/

    el violín no está funcionando para mí, no muestra la imagen
    Fijo, utilizado antes de anexar la que se añadió la imagen en el campo de entrada lo que no es vvisible.
    Parece que esto sólo funciona en Chrome, No en IE y Firefox 15.
    He modificado el violín que funcionan en Firefox, probablemente funciona en IE9, pero no probados: jsfiddle.net/ugPDx/825
    Archivo API es compatible con IE10 y 11. Los usuarios de versiones anteriores sólo debe dejar de arrastrar detrás de nosotros 🙂

    OriginalEl autor Peeter

  2. 1

    No hay manera de realizar la operación antes de subir la imagen.

    Pero pensar en ella de una manera diferente – el usuario “no cuidado” si la imagen ya está cargado – se puede mostrar la imagen en miniatura después de que has subido, y mostrar una casilla de verificación confirmar. Gmail con sus archivos adjuntos de correo electrónico – tan pronto como se selecciona el archivo a adjuntar, la carga comienza. Pero el usuario siempre tiene la opción de desactivar el archivo, y no se incluirá en el correo electrónico.

    edit: @Peeter html5 archivo api (w3.org/TR/FileAPI) es muy interesante. lástima que no la cruz de compatibilidad con navegadores.

    OriginalEl autor Chii

Dejar respuesta

Please enter your comment!
Please enter your name here