Caricamento a livello di codice di un file

Sto utilizzando il plug-in di caricamento del file jQuery che ha un API per caricare i file a livello di programmazione. La documentazione scrive:Caricamento a livello di codice di un file

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

Il problema è che io non so che cosa filesList dovrebbe essere. Ho provato quanto segue senza successo:

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

Quale dovrebbe filesList essere esattamente?

fonte

2012-01-20 Randomblue

sicuramente non si può caricare qualsiasi file dal computer dell'utente in quel modo. Dove dovrebbe condurre? – kapa

@bazmegakapa: vedere [qui] (https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest), "Esempio: richiesta sincrona non HTTP" – Randomblue

Sì, che potrebbe funzionare da uno script in esecuzione locale per il recupero un file. Ma non è possibile utilizzarlo per caricare file su un server remoto. – kapa

Per citare the documentation:

Il secondo argomento deve essere un oggetto con una matrice (o lista di array-like) di file o di Blob come oggetti di proprietà dei file.

È possibile ottenere oggetti file utilizzando la proprietà file di un input di tipo file o l'API file HTML5.

Per ulteriori dettagli riguardo a lavorare con il FileAPI e gli ingressi file Vedere: MDC - Using files from web applications

fonte

2012-01-20 11:02:32

"È possibile ottenere oggetti file utilizzando la proprietà file di un input di tipo file o l'API file HTML5." -> Questa è esattamente la mia domanda. Qual è l'API/sintassi pertinente per recuperare i file? – Randomblue

Devo sottolineare che l'acquisizione di un file dal client senza che l'utente la selezioni non è ottenibile a causa delle implicazioni sulla sicurezza. –

Lo capisco. Ma perché viene fornita l'API allora? – Randomblue

La documentazione ti dice

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

durante il collegamento File per Mozilla's DOM File object

Si dovrebbe fornire una vasta gamma di questi oggetti

fonte

2012-01-20 11:03:08 Grooveek

ridicolo esempio :) che funziona!

<!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>

fonte

2012-10-17 23:21:54

Qualche spiegazione sarebbe bella –

Voglio davvero dare questo 5+ Up Votes. Non riuscivo a spiegarmi come creare l'elenco dei file e/o accedere all'elenco delle proprietà di esempio. Grazie mille per l'esempio !! – KDrewiske

Voglio davvero dare questo voto positivo, ma sono d'accordo sul fatto che la risposta trarrebbe beneficio da qualche spiegazione. –

@ risposta pedro.dz mi ha aiutato:

$(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}); 
    }); 

});

Per upload multipli:

<!-- 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">

fonte

2015-08-19 12:05:32 itsazzad

Caricamento a livello di codice di un file

risposta

Problemi correlati