Gestione file con javascript

**spiderman23** · 31-05-2010, 20:29

Ciao a tutti,
sto provando a creare un "file uploader" in ajax, sfruttando php...
Per fare ciò ho bisogno di selezionare dei files tramite l'input type="file" e leggerne il path tramite javascript per poi passare questi ad uno script php...
il problema è che non riesco a leggerli perchè se provo a recuperare il "value" dell'oggetto recuperato tramite l'id(dentro l'input vengono definiti i path del filesystem separati da ",") mi recupera solo il primo path selezionato, mentre se lo recupero come file... tramite il metodo .file, non riesco a trovare il metodo che mi permetta di leggerne il l'indirizzo sul filesystem...

Facendo una stampa dell'oggetto(tramite un alert) mi dice [Object file]...

Qualcuno sa come posso manipolarlo?

...su internet sinceramente non ho trovato molto...c'è chi dice che bisogna usare un oggetto ActiveXObject...che però funziona solo con Internet Explorer...boh...

non so come risolvere...se si può...o se mi devo rassegnare al fatto che devo trovare qualche altra soluzione...

**br1** · 31-05-2010, 21:56

La maggior parte dei browser moderni, per motivi di sicurezza e riservatezza, non permette di leggere il path del file (singolo) selezionato.

E comunque non si puo' fare l'upload di un file con ajax... ci sono millemila discussioni sull'argomento.

A, si, con il controllo type="file" non si possono selezionare files multipli o cartelle.

ciao

**spiderman23** · 01-06-2010, 07:40

Beh...nn è affatto vero che nn si può cn l'input type file sezionare più files, infatti basta utilizzare l'attributo multiple="true"...e x quanto riguarda l'upload è possibile ovviamente non solo con ajax, ma ho premesso che con ajax avrei fatto una chiamata ad una funzione php...
Basterebbe solo recuperare i path...completi...

Quindi non c'è modo di recuperarli?

**spiderman23** · 02-06-2010, 10:41

Nessuno sa indicarmi qualche spiraglio? Mi devo rassegnare all'idea di nn poterlo recuperare questo path?

**carlomarx** · 02-06-2010, 14:35

Ha ragione br1, si tratta di una restrizione di sicurezza... Ma credo che questa discussione possa esserti di aiuto:
http://stackoverflow.com/questions/8...m-in-firefox-3.

Come forse anche quest'esempio che ho preso da là:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input type=file & Firefox 3</title>
</head>

<body>
	
<h1>input type=file & Firefox 3</h1>
	
<script type="text/javascript">
// <![CDATA[

function inputFileOnChange() {
	var v_console = '';
	v_console += 'value: ' + document.getElementById('fichier').value;
	v_console += '<br \/>';
	
	if(document.getElementById('fichier').files) {
		// Support: nsIDOMFile, nsIDOMFileList
		v_console += 'files.length: ' + document.getElementById('fichier').files.length;
		v_console += '<br \/>';
		
		v_console += 'fileName: ' + document.getElementById('fichier').files.item(0).fileName;
		v_console += '<br \/>';
		
		v_console += 'fileSize: ' + document.getElementById('fichier').files.item(0).fileSize;
		v_console += '<br \/>';
		
		v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsDataURL();
//		v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsBinary();
//		v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsText();
		v_console += '<br \/>';
	};
	
	document.getElementById('console').innerHTML = v_console;
};

// ]]>
</script>
	
<div>
	<input type="file" name="fichier" id="fichier" onchange="inputFileOnChange();" />
	


	<code id="console">...console...</code>
</div>
	
</body>
</html>

In sostanza, puoi ottenere il contenuto del file, ma non il suo percorso – in fondo a te quello interessa, no?
...fossi in te aspetterei a darmi per vinto.

Ciao

**carlomarx** · 04-06-2010, 11:35

Qualcuno ha già in parte completato il lavoro che tu vorresti intraprendere...

http://blog.igstan.ro/2009/01/pure-j...le-upload.html
Lo script ha il difetto di utilizzare i metodi deprecati (l'ho scoperto adesso

) e validi solo per Firefox file.getAsBinary() file.getAsDataURL() e file.getAsText() che ti avevo indicato nel precedente post...

Se ti può interessare, esiste un nuovo standard HTML5 (per ora supportato solo da Firefox) che consente la lettura dei file locali. Fossi in te lavorerei in questa direzione, testando il tutto su Firefox in attesa che anche gli altri browsers si adeguino (ripeto, si tratta di uno standard W3C). Eccoti un po' di documentazione:

http://www.w3.org/TR/FileAPI/#dfn-filereader
http://arstechnica.com/open-source/n...e-api-spec.ars (da dove ho preso l'esempio che segue)
https://developer.mozilla.org/en/DOM/FileReader

Ed eccoti un esempio che puoi già testare su Firefox 3.5:

codice:

<html>
  <head>
    <style>
      #editor {
        border: 1px solid black;
        height: 250px;
        margin: 15px;
        padding: 10px;
        overflow: scroll;
      }
    </style>
    <script type="text/javascript">
        function load() {
          var finput = document.getElementById("data");
          var editor = document.getElementById("editor");

          var f = finput.files[0];

          if (f) {
            var r = new FileReader();
            r.onload = function(e) { editor.innerHTML = e.target.result }
            r.readAsText(f);
          } else { editor.innerHTML = "Failed to load file" }
        }

        function format(c) { document.execCommand(c, false, false); }
    </script>
  </head>
  <body>

    <h3>HTML File Reader Test</h3>

    

Select a file:
    <input type="file" id="data" />
    Load
    </p>

    


    Bold
    Italic
    Underline
    </p>

    <div id="editor" contentEditable="true"></div>
  </body>
</html>

Ciao

Discussione: Gestione file con javascript

Strumenti discussione

Ricerca discussione

Visualizza

Gestione file con javascript

Permessi di invio