Bootstrap File Input (archivos), utilizando html5



Bootstrap File Input (archivos), utilizando html5, Un campo mejorado con HTML 5 que nos permite la entrada de archivo, este plugin trabaja con la versión 3 de Bootstrap y permite la previsualización los archivos para las imágenes y el texto, tambien puedes seleccionar múltiples archivos y más.

El plug-in mejora conceptos usuales y simplifica la inicialización de código muy extenso, lo impresionante es que la manera de usar es simplemente con un marcado HTML en un archivo de entrada.

Aparte de que también ofrece soporte para la previsualización de archivos múltiples y la vista previa de las imágenes y los tipos de texto.

Lo más cómodo e interesante en este plugin es que muestra la imagen antes de realizar la carga al servidor, por lo que el usuario final puede ver la imagen antes de enviarla al servidor, el detalle es que no incluye ninguna carga en con ajax del archivo.

Tienes una demostración:http://plugins.krajee.com/file-input/demo

 

 

Ya no tienes que preocuparte más por la carga de tus imágenes, la manera de impelementar este plugin es sencilla, siempre y cuando tengas que usar bootstrap para la construcción de tú aplicación.

 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Krajee JQuery Plugins - &copy; Kartik</title>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/fileinput.min.js" type="text/javascript"></script>

</head>

 

 


<body>
<div class="container">
<h1>Bootstrap File Input Example</h1>
<form enctype="multipart/form-data">
<div class="form-group">
<input id="file-1" type="file" class="file" multiple=true data-preview-file-type="any">
</div>
<div class="form-group">
<input id="file-2" type="file" class="file" readonly=true>
</div>
<div class="form-group">
<input id="file-3" type="file" multiple=true>
</div>
<div class="form-group">
<button class="btn btn-primary">Submit</button>
<button class="btn btn-default" type="reset">Reset</button>
</div>
</form>
</div>
</body>

<script>
$("#file-3").fileinput({
showCaption: false,
browseClass: "btn btn-primary btn-lg",
fileType: "any"
});
</script>

&nbsp;

</html>

La clave esta en la etiqueta y el script


<input id="file-3" type="file" multiple=true>


<script>
$("#file-3").fileinput({
showCaption: false,
browseClass: "btn btn-primary btn-lg",
fileType: "any"
});
</script>

Ademas tienes una completa documentación en el siguiente enlace:https://github.com/kartik-v/bootstrap-fileinput

You may also like...

  • Macof

    Disculpa para ponerlo en español, saben como?

    • Develoteca

      Claro, bueno el plugin se crea sobre los elementos html que tú pongas, si los pones en español lo obtendrás, en español, sin embargo también el plugin esta preparado para eso, una vez que descargues el plugin en la carpeta js hay un archivo fileinput donde hay métodos que permiten cambiar etiquetas, como por ejemplo estas:

      browseLabel: “Pick Image”,
      uploadLabel: “Upload”,
      Si ya lo implementaste y tienes alguna duda puedes seguir preguntando.
      Saludos.

      • Macof

        ya pude muchas gracias, y felicidades por tu página =)

  • Enrique Milano

    buenas, donde se coloca el directorio donde sera guardada la imagen? como puedo recuperar la url de la imagen como tal para q sea almacenada en una base de datos

    • Develoteca

      Usa la opción que tiene el plugin: uploadUrl:
      “http://localhost/file-upload-single/1”, Los datos llegaran de manera
      tradicional (Como enviar los datos con un formulario tradicional), con esto ya puedes almacenarlo en una base de datos.

      Puedes ver mucho más información en la siguiente dirección:
      http://plugins.krajee.com/file-input/demo#ajax-demo-1

      En caso de tener más complicación y necesitas una asesoría,
      puedes solicitarla mediante el formulario de contacto y especificando cual es
      el problema que quieres resolver, tardara aproximadamente de 4 a 5 días para la
      creación del vídeo de asesoría.

      Gracias por suscribirte:
      https://www.youtube.com/user/dimit28

      Saludos.

      • Danilo Alarcon Villagran

        Tengo otra pregunta, en el caso que quiera editar, como cargo las imagenes guardadas con jquery? lo he intentado, cargo las imagenes, pero al agregar otras, se me borran las que venían primero

  • Raul

    Estimado, excelente tutorial y uno de los pocos que he encontrado que cumple 100% lo que requiero. Tengo una pequeña duda, como hacer para agregar los botones de eliminar a cada archivo que deseo subir y lo otro como ir seleccionando los archivos de modo que si agrego el siguiente, no se me eliminen los anteriores que ya estaban listos para la subida?.

    Espero haberme hecho entender y tengan la voluntad de ayudarme.
    Excelente tuto.
    Saludos!

  • Carlos Manzano

    Buenos días!

    Buenísimo aporte, una consulta, como hago para verificar si el archivo es un pdf y mostrar el consiguiente mensaje de error? Estoy intentando entenderlo pero no le encuentro el punto.

    Muchas Gracias!

    • Develoteca

      Hola que tal puedes utilizar la siguiente línea de código: allowedFileExtensions: [“jpg”, “gif”, “png”, “txt”]
      Saludos.

  • axel cortez

    Buen dia, buen aporte, solo con una pregunta. El folder que creas para guardas las imagenes, lo tienes que crear antes de corer el programa o el programa crea el folder en caso de no existir?

    Gracias

    • Develoteca

      Bueno en especial para demostración esta creada, pero puedes generar un script para crear la carpeta.
      Saludos gracias por comentar, por suscribirte y por los pulgares arriba,

  • Valeria Losanbe

    Excelente material. Hay modo de que al cargar la imagen (porque muchas pesan como 6 megas las que tengo) el sistema automaticamente le baje el tamaño? y luego suba esa imagen con el tamaño mas bajo?

    • Develoteca

      Bueno se puede ser al contrario que una vez que suba la servidor, el sistema re-dimensione la imagen con php, puedes usar esta clase : https://www.youtube.com/watch?v=STNl7PEe1MI para realizar dicho cambio de imagen. por otro lado tendrias que modificar el plugin con javascript para la dimensionar con javascript, podrías implementarlo con canvas.
      http://jsfiddle.net/v8app/1078/, gracias por comentar, por la suscripción al canal y por los pulgares arriba.

      Saludos.

  • Ricardo Villavicencio

    Excelente Material pero tengo un pequeño problema al subir un pdf al seleccionarlo se ve genial pero una vez que lo sube cuando regresa ya no se ve, muestra como si no hubiese encontrado la imagen. Hay algo que tenga que modificar para que se vea bien el pdf????

    • Develoteca

      Bueno hay que ver la consola, para ver que realmente esta sucediendo.

      • Ricardo Villavicencio

        No te preocupes ya lo e solucionado se cambian 2 lineas de codigo gracias.

  • Gaston

    Hola , tengo un inconveniente , al darle borrar me aparece SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data., me podrias dar una mano con esto ? Gracias , excelente tutorial

    • Develoteca

      1.- Verifica si el borrado del archivo físico se lleva a cabo, probablemente .
      2.- Verifica si el servidor php soporta la función json_.

  • Antonio Eduardo Gallegos Nuñez

    Hola, he implementado el plugin… carga bien y graba en la base de datos sin embargo al final me sale este mensaje “SyntaxError: Unexpected token <."
    A que se debe y como debo de solucionarlo….

    • Develoteca

      El problema posiblemente es en upload ya que el archivo es un pdf, en este caso tendría que ver la respuesta json que se envía, verifica que lo que devuelve es el contenido json deseado, si de alguna manera me puedes enviar el codigo con mucho gusto le puedo dar un vistazo, gracias por el comentario, por compartir y por los pulgares arriba,

  • Rover Mendoza

    Muy Bueno Gracias Me Ayudo Bastante

    • Develoteca

      Que bueno que te ayudo, gracias por los comentarios por compartir.
      Saludos.

  • Edwin Pacheco

    Muchas gracias por Tu aporte… por favor me gustiaria saber como guardar el nombre del archivo en una base de datos

  • Danilo Alarcon Villagran

    Hola, que tal, estaba viendo, y veo que realmente es muy bueno este aporte, pero tenía un problema. Resulta que estoy tratando de adjuntar varios archivos, y cuando adjunto varios archivos de una vez, funciona bien, pero cuando empiezo a adjuntar de uno por uno, solamente me toma el ultimo archivo adjuntado es como si se perdieran los otros. La forma como lo hago es la siguiente:
    tengo el input con su funcion

    $(‘#file_es’).fileinput({

    language: ‘es’,

    uploadUrl: ‘#’,

    allowedFileExtensions: [‘jpg’, ‘png’, ‘gif’],

    });
    ———

    ——-
    Pero aca es donde estoy tratando de enviar los multiples archivos adjuntos, y aquí es el problema que no consigo resolver:
    $(document).ready(function () {

    $(“#noticia_enviar”).click(function () {

    var fd = new FormData();
    var c = 0;
    var file_data=[];
    $(‘input[name=”file”]’).each(function () {
    file_data = $(‘input[name=”file”]’).files; // for multiple files
    for (var i = 0; i < file_data.length; i++) {
    fd.append("file_" + c, file_data[i]);
    }
    c++;
    });
    $.ajax({
    type: "POST",
    url: '/Noticias/GuardarNoticia',
    data: fd,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function (response) {
    alert('succes!!');
    },
    error: function (jqXHR, textStatus, errorThrown) {
    alert(jqXHR.status);
    }
    });
    });
    });

    Si alguien supiera como resolverlo, se lo agradecería mucho. Ha sido muy difícil de resolverlo.

  • Danilo Alarcon Villagran

    Tengo otra pregunta, en el caso que quiera editar, como cargo las imagenes guardadas con jquery? lo he intentado, cargo las imagenes, pero al agregar otras, se me borran las que venían primero o guardadas de la base datos para editar.

  • maylin veras

    LOS TUTORIALES SE HACEN HA UNA VELOCIDAD QUE EL USUARIO QUE LO ESTE
    VIENDO PUEDA INTERPRETARLO, POR LOMENOS LA IDEA DE LO QUE SE QUIERE
    EXPLICAR PERO HA ESA VELOCIDAD NI USTED MISMO LO ENTIENDE…

  • chino

    para instalar en CI se puede?

  • Dandy Adams Ramirez

    hola

  • Dandy Adams Ramirez

    Hola amigo si pudieras implementarlo con una base dedatos seria mas interesante soy nuevo pero de ahi puedo aprender si esta bine la velocidad viendolo detenidamente se lo entiende

  • abed

    how can i add drag(sort) for each image -> so i can sort image as i want and when i refrech page the sort still as i do

  • ll flor

    hola como se puede pasar informacion del modal a un pdf y que se imprima

  • Hola! estas funciones siguen estando vigentes? Creo que el plugin ya se ha actualizado al día de hoy,….

  • matematico

    Hola que tal. Antes que nada agrdecerte pro la información. Y ver sime puedes hechar la mano con algo. Resulta que he implementado el codigo que pones en el video, solo que el al intentr eliminar una imagen aparece un error:
    501 Not Implemented
    Not Implemented
    GET to /crg/pruebas/borrar.php not supported.
    Additionally, a 501 Not Implemented
    error was encountered while trying to use an ErrorDocument to handle the request.
    La vedd ya he intentado investigar péro no encuentro mucho al respecto. Me podrías hechar la mano?.
    Muchas gracias

  • Claudio Núñez

    Hola que tal
    He estado trabajando con esta herramienta sin problemas desde un pc, sin embargo desde un celular o tablet genera un pequeño inconveniente.
    Al momeno de querer sacar una foto mediante la camara de la tablet o celular con android, la imagen no cambia de tamaño.
    Desde un computador no tengo inconvenientes.

    Este es mi codigo:

    var cant_fotos = $(“#cant_fotos_”+id_item_input).val();
    $(this).fileinput({
    language: ‘es’,
    uploadUrl: ‘../formularios/acciones/carga/carga_evidencia_item.php?sector=fotos_control&iitem=’+id_item_input+”&n_pag=”+nombre_pag,
    allowedFileExtensions :[‘jpg’, ‘jpeg’],
    resizeImage: true,
    maxImageWidth: 90,
    resizePreference: ‘width’,
    maxFileCount: cant_fotos,
    validateInitialCount: true,
    overwriteInitial: false,
    uploadAsync: true,
    dropZoneTitle : “Máximo “+cant_fotos+” Evidencia(s)”,
    layoutTemplates: {
    actions: ‘n’ +
    ‘ n’ +
    ‘ {upload}{delete}’ +
    ‘ n’ +
    ‘ n’ +
    ”,
    actionUpload: “”,indicatorNew:””
    },
    }).on(“filebatchselected”, function(event, files) {
    // trigger upload method immediately after files are selected
    $(this).fileinput(“upload”);

    }).on(‘fileuploaded’, function(event, data, previewId, index) {
    //debemos sumar 1 al contador de imagenes
    var contador = Number($(“#txt_cant_fotos_car_fc_”+id_item_input).val()) + 1;
    $(“#txt_cant_fotos_car_fc_”+id_item_input).val(contador);

    }).on(‘filedeleted’, function(event, key) {
    //debemos verificar si el contador es menor al maximo permitido
    var contador = Number($(“#txt_cant_fotos_car_fc_”+id_item_input).val()) – 1;
    $(“#txt_cant_fotos_car_fc_”+id_item_input).val(contador);
    });

  • Kevin Cano

    Hola, algun tutorial para usar el Avatar Upload ?