Carga mediante programación de un archivo

Estoy usando el complemento de carga de archivos jQuery que tiene un API para cargar archivos mediante programación. La documentación escribe:Carga mediante programación de un archivo

$('#fileupload').fileupload('add', {files: filesList});

El problema es que no sé lo que debería haber filesList. He intentado, sin éxito, la siguiente:

$('#fileupload').fileupload('add', {files: ['/Users/bob/Desktop/test.png']});

Lo que debería ser exactamente filesList?

Fuente

2012-01-20 Randomblue

Por cierto, no se puede cargar cualquier archivo desde el ordenador del usuario así. ¿A dónde llevaría eso? – kapa

@bazmegakapa: Consulte [aquí] (https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest), el "Ejemplo: solicitud síncrona no HTTP" – Randomblue

Sí, eso podría funcionar desde un script ejecutado localmente para recuperarlo un archivo. Pero no puede usarlo para cargar archivos a un servidor remoto. – kapa

Para citar the documentation:

El segundo argumento debe ser un objeto con una matriz (o lista de arreglo similar) del archivo o Blob objetos como archivos de propiedad.

Puede obtener objetos de archivo utilizando los archivos propiedad de una entrada de tipo de archivo o la API de archivos HTML5.

Para más detalles con respecto a trabajar con el FileAPI y entradas de archivo, ver: MDC - Using files from web applications

Fuente

2012-01-20 11:02:32

"Puede obtener objetos de archivo utilizando los archivos propiedad de una entrada de tipo de archivo o la API de archivos HTML5". -> Esa es exactamente mi pregunta. ¿Cuál es la API/sintaxis relevante para buscar archivos? – Randomblue

Debo señalar que agarrar un archivo del cliente sin que el usuario lo seleccione no es posible debido a las implicaciones de seguridad. –

Entiendo eso. Pero, ¿por qué se proporciona la API? – Randomblue

La documentación le dice

The second argument must be an object with an array (or array-like list) of File 
or Blob objects as files property.

mientras que la vinculación de archivos a Mozilla's DOM File object

Debe suministrar una gran variedad de éstos objetos

Fuente

2012-01-20 11:03:08 Grooveek

ridículo ejemplo :) que funciona!

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
</head> 
<body> 
<div id="fileupload"></div> 
<input class="zz" type="file" name="files[]" multiple><br /> 
<input class="zz" type="file" name="files[]" multiple><br /> 
<input class="zz" type="file" name="files[]" multiple><br /> 
<input class="zz" type="file" name="files[]" multiple><br /><br /><br /><br /> 
<input id="envoi_fax" type="submit" class="btn btn-primary start"> <i class="icon-upload icon-white"></i><span>Start upload</span> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script src="js/vendor/jquery.ui.widget.js"></script> 
<script src="js/jquery.iframe-transport.js"></script> 
<script src="js/jquery.fileupload.js"></script> 
<script src="js/jquery.fileupload-fp.js"></script> 
<script src="js/jquery.fileupload-ui.js"></script> 
<script> 
$('document').ready(function() { 
    var mycars = new Array(); 

    $('#fileupload').fileupload({ 
     url:'server/php/', 
     dataType: 'json', 
     singleFileUploads: false, 
     done: function (e, data) { 
      $.each(data.result, function (index, file) { 
       $('<p/>').text(file.name).appendTo(document.body); 
      }); 
     } 
    }); 

    $('.zz').bind('change', function (e) { 
     var f; 
     f = e.target.files || [{name: this.value}]; 
     mycars.push(f[0]); 
    }); 

    $("#envoi_fax").click(function() { 
     $('#fileupload').fileupload('send', {files: mycars}); 
    }); 
}); 
</script> 
</body> 
</html>

Fuente

2012-10-17 23:21:54

Alguna explicación sería agradable –

Realmente quiero dar este 5+ Votos. Simplemente no podía entender cómo crear la lista de archivos y/o acceder a la lista utilizada por las propiedades de ejemplo. ¡¡Muchas gracias por el ejemplo !! – KDrewiske

Realmente quiero dar este voto positivo, pero estoy de acuerdo en que la respuesta realmente se beneficiaría de alguna explicación. –

@ respuesta pedro.dz me ayudó:

$(function() { 
    'use strict'; 
    // Change this to the location of your server-side upload handler: 
    var url = 'server/php/'; 
    var filesList=new Array(); 

    $('.fileupload').fileupload({ 
     autoUpload: false,// 
     url: url, 
     dataType: 'json', 
     sequentialUploads: true, 
     add: function (e, data) { 
      console.log(data); 
      $.each(data.files, function (index, file) { 
       filesList.push(file); 
       console.log('Added file: ' + file.name); 
      }); 
      console.log(filesList); 

     }, 
     send: function (e, data) { 
      console.log('send:'); 
      console.log(e); 
      console.log(data); 
      data.formData = {example: "my data"}; 
     }, 
     done: function (e, data) { 
      console.log('done:'); 
      console.log(e); 
      console.log(data); 

      $.each(data.result.files, function (index, file) { 
       console.log(file); 
       $('<p/>').text(file.name).appendTo('#files'); 
      }); 
     }, 
     progressall: function (e, data) { 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
      $('#progress .progress-bar').css(
       'width', 
       progress + '%' 
      ); 
     }, 
    }).prop('disabled', !$.support.fileInput) 
     .parent().addClass($.support.fileInput ? undefined : 'disabled'); 

    $("#uploadfiles").click(function() { 
     alert('sending'); 
     $('.fileupload').fileupload('send', {files: filesList}); 
    }); 

});

Para múltiples cargas:

<!-- The fileinput-button span is used to style the file input field as button --> 
<span class="btn btn-success fileinput-button"> 
    <i class="glyphicon glyphicon-plus"></i> 
    <span>#1 Select files...</span> 
    <!-- The file input field used as target for the file upload widget --> 
    <input class="fileupload" type="file" name="files[]" multiple> 
</span> 
<br> 
<!-- The fileinput-button span is used to style the file input field as button --> 
<span class="btn btn-success fileinput-button"> 
    <i class="glyphicon glyphicon-plus"></i> 
    <span>#2 Select files...</span> 
    <!-- The file input field used as target for the file upload widget --> 
    <input class="fileupload" type="file" name="files2[]" multiple> 
</span> 
    <input id="formData" type="text" name="formData" value="21212121212"> 
    <input id="uploadfiles" type="button" value="Send">

Fuente

2015-08-19 12:05:32 itsazzad

Carga mediante programación de un archivo

Respuesta

Cuestiones relacionadas