it-swarm.it

Come ottenere il percorso del file dal modulo di input HTML in Firefox 3

Abbiamo un semplice modulo HTML con <input type="file">, come mostrato di seguito:

<form>
  <label for="attachment">Attachment:</label>
  <input type="file" name="attachment" id="attachment">
  <input type="submit">
</form>

In IE7 (e probabilmente in tutti i browser famosi, incluso il vecchio Firefox 2), se inviamo un file come '// server1/percorso/a/file/nomefile' funziona correttamente e fornisce il percorso completo del file e del nome file.

In Firefox 3, restituisce solo "nome file", a causa della loro nuova "funzione di sicurezza" per troncare il percorso, come spiegato nel sistema di tracciamento dei bug di Firefox ( https://bugzilla.mozilla.org/show_bug.cgi? id = 143.22 )

Non ho idea di come superare questa "nuova funzionalità" perché fa sì che tutti i moduli di caricamento nella mia webapp smettano di funzionare su Firefox 3.

Qualcuno può aiutare a trovare una singola soluzione per ottenere il percorso del file su Firefox 3 e IE7?

52
m_pGladiator

In IE7 (e probabilmente in tutti i browser famosi, incluso il vecchio Firefox 2), se inviamo un file come "// server1/percorso/a/file/nomefile" funziona correttamente e fornisce il percorso completo del file e del nome file.

Non ho idea di come superare questa "nuova funzionalità" perché fa sì che tutti i moduli di caricamento nella mia webapp smettano di funzionare su Firefox 3.

C'è un grande fraintendimento qui. Perché hai mai bisogno del percorso del file pieno sul lato server? Immagina di essere il cliente e ho un file in C:\path\to\passwords.txt E ti do il percorso completo del file. Come saresti mai un server a ottenere il suo contents? Hai una connessione aperta TCP al mio file system del disco locale? Hai testato la funzionalità di caricamento dei file quando hai portato la tua webapp in produzione su un altro server?

Funzionerà solo quando entrambi il client e il server girano su fisicamente la stessa macchina , perché avrai quindi accesso al file system stesso disco rigido. Ciò si verificherebbe solo quando stai sviluppando localmente il tuo sito Web e quindi sia il browser web (client) che il server web (server) vengono eseguiti per coincidenza sulla stessa macchina.

Che il percorso completo del file venga inviato in MSIE e altri antichi browser Web è dovuto a un bug di sicurezza. Le specifiche W e RFC2388 non sono mai state menzionate per includere il percorso completo del file. Solo il nome del file. Firefox sta facendo il suo lavoro correttamente.

Per gestire i file caricati, non è necessario conoscere il percorso completo del file. Dovresti piuttosto essere interessato al file completo contenuto che il client ha già inviato al server nel corpo della richiesta in caso di multipart/form-data richiesta. Modificare il modulo in modo che assomigli a quanto indicato in RFC2388:

<form action="upload-script-url" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit">
</form>

Come ottenere il contenuto del file caricato sul lato server dipende dal linguaggio di programmazione lato server che si sta utilizzando.

  • Java/JSP : ti piacerebbe usare HttpServletRequest#getPart() o Apache Commons FileUpload API per analizzarlo. Dovresti finire con un InputStream con il contenuto del file che a sua volta puoi scrivere su qualsiasi OutputStream secondo i tuoi gusti. Puoi trovare un esempio in questa risposta .

  • Java/JSF : ti piacerebbe usare il componente <h:inputFile> o qualsiasi altro componente di caricamento dei file fornito da la libreria dei componenti che stai utilizzando. Anche qui, ti piacerebbe ottenere il contenuto del file con il sapore di un InputStream. Vedi questa risposta per un esempio.

  • [~ # ~] php [~ # ~] : il contenuto del file è già implicitamente memorizzato sul disco temporaneo. Si desidera utilizzare move_uploaded_file() funzione per spostarlo nella posizione desiderata. Vedi anche manuale PHP .

  • ASP.NET : nessuna risposta dettagliata da parte mia poiché non lo faccio, ma Google ha trovato alcuni esempi per me: ASP. Esempio NET , esempio ASP.NET 2.

Ogni volta che si desidera ottenere la parte del nome file del file caricato, è necessario tagliare il percorso completo fuori dal nome del file. Questa informazione è assolutamente irrilevante per te. Vedi anche ad esempio questo Apache Commons FileUpload FAQ entry

Perché FileItem.getName () restituisce l'intero percorso e non solo il nome del file?

Internet Explorer fornisce l'intero percorso del file caricato e non solo il nome del file di base. Poiché FileUpload fornisce esattamente ciò che è stato fornito dal client (browser), è possibile che si desideri rimuovere queste informazioni sul percorso nell'applicazione.

60
BalusC

Per l'anteprima in Firefox funziona: l'allegato è l'oggetto dell'elemento allegato nel primo esempio:

           if (attachment.files)
             previewImage.src = attachment.files.item(0).getAsDataURL();
           else
             previewImage.src = attachment.value;
10
houba

In realtà, poco prima che FF3 uscisse, ho fatto alcuni esperimenti e FF2 invia solo il nome del file, come ha fatto Opera 9.0. Solo IE invia il percorso completo. Il comportamento ha senso, poiché il server non deve sapere dove l'utente memorizza il file sul suo computer, è irrilevante per il processo di caricamento, a meno che tu non stia scrivendo un'applicazione intranet e ottenga il file tramite l'accesso diretto alla rete!

Ciò che è cambiato (e questo è il vero punto dell'elemento bug a cui fai riferimento) è che FF3 non consente più l'accesso al percorso del file da JavaScript. E non permetterò di digitare/incollare un percorso lì, il che è più fastidioso per me: ho un'estensione Shell che copia il percorso di un file da Esplora risorse negli Appunti e l'ho usato molto in tale forma. Ho risolto il problema utilizzando l'estensione DragDropUpload. Ma questo diventa fuori tema, temo.

Mi chiedo cosa stiano facendo i tuoi moduli Web per smettere di lavorare con questo nuovo comportamento.

[EDIT] Dopo aver letto la pagina collegata da Mike, vedo davvero gli usi intranet del percorso (identificare ad esempio un utente) e gli usi locali (mostra l'anteprima di un'immagine, la gestione locale dei file). L'utente Jam-es sembra fornire una soluzione alternativa con nsIDOMFile (non ancora provato).

2
PhiLho

Non è possibile ottenere il percorso completo del file in FF3. Quanto segue potrebbe essere utile per la personalizzazione del componente File.

<script>

function setFileName()
{
    var file1=document.forms[0].firstAttachmentFileName.value; 

    initFileUploads('firstFile1','fileinputs1',file1);
    }
function initFileUploads(fileName,fileinputs,fileValue) {
    var fakeFileUpload = document.createElement('div');
    fakeFileUpload.className = 'fakefile';
    var filename = document.createElement('input');
    filename.type='text';
    filename.value=fileValue;
    filename.id=fileName;
    filename.title='Title';
    fakeFileUpload.appendChild(filename);
    var image = document.createElement('input');
    image.type='button';
    image.value='Browse File';
    image.size=5100;
    image.style.border=0;
    fakeFileUpload.appendChild(image);
    var x = document.getElementsByTagName('input');
    for (var i=0; i&lt;x.length;i++) {
        if (x[i].type != 'file') continue;
        if (x[i].parentNode.className != fileinputs) continue;
        x[i].className = 'file hidden';
        var clone = fakeFileUpload.cloneNode(true);
        x[i].parentNode.appendChild(clone);
        x[i].relatedElement = clone.getElementsByTagName('input')[0];
        x[i].onchange= function () {
            this.relatedElement.value = this.value;
        }}
    if(document.forms[0].firstFile != null && document.getElementById('firstFile1') != null)
    {
    document.getElementById('firstFile1').value= document.forms[0].firstFile.value;
    document.forms[0].firstAttachmentFileName.title=document.forms[0].firstFile.value;
    }
}

function submitFile()
{
alert( document.forms[0].firstAttachmentFileName.value);
}
</script>
<style>div.fileinputs1 {position: relative;}div.fileinputs2 {position: relative;}
div.fakefile {position: absolute;top: 0px;left: 0px;z-index: 1;}
input.file {position: relative;text-align: right;-moz-opacity:0 ;filter:alpha(opacity: 0);
    opacity: 0;z-index: 2;}</style>

<html>
<body onLoad ="setFileName();">
<form>
<div class="fileinputs1">
<INPUT TYPE=file NAME="firstAttachmentFileName" styleClass="file" />
</div>
<INPUT type="button" value="submit" onclick="submitFile();" />
</form>
</body>
</html>
2
Jay

Questa è una soluzione/correzione alternativa ... In FF3, puoi recuperare il percorso completo del file in una casella di testo anziché nella casella di ricerca dei file. E anche quello ... Trascinando/rilasciando il file!

Puoi trascinare la selezione del file in una casella di testo nella tua pagina html. e mostrerà il percorso completo del file. Questi dati possono essere trasferiti facilmente sul tuo server o manipolarli.

Tutto quello che devi fare è utilizzare l'estensione DragDropUpload

http://www.teslacore.it/wiki/index.php?title=DragDropUpload

Questa estensione ti aiuterà a trascinare i file nella casella Sfoglia file (file di input). Ma non sarai ancora in grado di ottenere il percorso completo del file, se provi a recuperarlo.

Quindi, ho modificato leggermente questa estensione. Nel modo in cui posso trascinare rilasciare un file su qualsiasi casella "Input di testo" e ottenere il percorso completo del file. E così posso ottenere il percorso completo del file in FF3 Firefox 3.

0
Kumaresan

Semplicemente non puoi farlo con FF3.

L'altra opzione potrebbe essere utilizzare l'applet o altri controlli per selezionare e caricare i file.

0
roh

Un modo estremamente brutto per risolvere questo problema è che l'utente digiti manualmente la directory in una casella di testo e la aggiunga nuovamente all'inizio del valore del file in JavaScript.

Disordinato ... ma dipende dal livello di utente con cui stai lavorando e aggira il problema di sicurezza.

<form>
    <input type="text" id="file_path" value="C:/" />
    <input type="file" id="file_name" />
    <input type="button" onclick="ajax_restore();" value="Restore Database" />
</form>

JavaScript

var str = document.getElementById('file_path').value;
var str = str + document.getElementById('file_name').value;
0
dan

Dai un'occhiata a XPCOM , potrebbe esserci qualcosa che puoi usare se Firefox 3 viene utilizzato da un client.

0
LohanJ

Questo è un esempio che potrebbe funzionare per te se ciò di cui hai bisogno non è esattamente il percorso, ma un riferimento al file che funziona offline.

http://www.ab-d.fr/date/2008-07-12/

È in francese, ma il codice è javascript :)

Questi sono i riferimenti a cui l'articolo punta: http://developer.mozilla.org/en/nsIDOMFilehttp://developer.mozilla.org/en/nsIDOMFileList

0
Victor