it-swarm-pt.tech

Como obter o caminho do arquivo no formulário de entrada HTML no Firefox 3

Temos um formulário HTML simples com <input type="file">, como mostrado abaixo:

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

No IE7 (e provavelmente em todos os navegadores famosos, incluindo o Firefox 2 antigo), se enviarmos um arquivo como '// server1/path/to/file/filename', ele funcionará corretamente e fornecerá o caminho completo para o arquivo e o nome do arquivo.

No Firefox 3, ele retorna apenas 'filename', devido ao seu novo 'recurso de segurança' para truncar o caminho, conforme explicado no sistema de rastreamento de bugs do Firefox ( https://bugzilla.mozilla.org/show_bug.cgi? id = 14322 )

Não tenho idéia de como superar esse 'novo recurso' porque faz com que todos os formulários de upload no meu aplicativo da Web parem de funcionar no Firefox 3.

Alguém pode ajudar a encontrar uma solução única para obter o caminho do arquivo no Firefox 3 e IE7?

51
m_pGladiator

No IE7 (e provavelmente em todos os navegadores famosos, incluindo o Firefox 2 antigo), se enviarmos um arquivo como '// server1/path/to/file/filename', ele funcionará corretamente e fornecerá o caminho completo para o arquivo e o nome do arquivo.

Não tenho idéia de como superar esse 'novo recurso' porque faz com que todos os formulários de upload no meu aplicativo da Web parem de funcionar no Firefox 3.

Há um grande mal-entendido aqui. Por que você precisa do caminho completo do arquivo no lado do servidor? Imagine que eu sou o cliente e tenho um arquivo em C:\path\to\passwords.txt e dou o caminho completo do arquivo para você. Como você, como servidor, obtém seu conteúdo ? Você tem uma conexão aberta TCP ao meu sistema de arquivos em disco local? Você testou a funcionalidade de upload de arquivo quando colocou seu aplicativo da Web em produção em uma máquina servidor diferente?

Só funcionará quando ambos o cliente e o servidor executarem fisicamente a mesma máquina, porque você então, tenha acesso ao mesmo sistema de arquivos do disco rígido . Isso ocorreria apenas quando você está desenvolvendo localmente o site e, portanto, o navegador da web (cliente) e o servidor da web (servidor) por coincidência são executados na mesma máquina.

O fato de o caminho completo do arquivo estar sendo enviado no MSIE e em outros navegadores da Web antigos deve-se a um erro de segurança . As especificações W e RFC2388 nunca mencionaram para incluir o caminho completo do arquivo. Somente o nome do arquivo. O Firefox está fazendo seu trabalho corretamente.

Para lidar com arquivos enviados, você não precisa saber o caminho completo do arquivo. Você deve estar interessado no conteúdo completo do arquivo que o cliente já enviou ao servidor no corpo da solicitação no caso de uma solicitação multipart/form-data. Altere seu formulário para se parecer com o seguinte, conforme indicado na RFC2388:

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

Como obter o conteúdo do arquivo carregado no servidor depende da linguagem de programação do servidor que você está usando.

  • Java/JSP : você gostaria de usar HttpServletRequest#getPart() ou Apache Commons FileUpload API para analisar isto. Você deve terminar com um InputStream com o conteúdo do arquivo que, por sua vez, pode gravar em qualquer OutputStream ao seu gosto. Você pode encontrar um exemplo em esta resposta .

  • Java/JSF : você gostaria de usar o componente <h:inputFile> ou qualquer outro componente de upload de arquivo fornecido pela biblioteca de componentes que você ' re usando. Também aqui, você deseja obter o conteúdo do arquivo no formato de um InputStream. Veja esta resposta para um exemplo.

  • PHP: o conteúdo do arquivo já está implicitamente armazenado no disco temporário. Você gostaria de usar a função move_uploaded_file() para movê-la para o local desejado. Veja também manual do PHP .

  • ASP.NET : nenhuma resposta detalhada de mim porque eu não faço isso, mas o Google encontrou alguns exemplos para mim: ASP. Exemplo de NET , exemplo do ASP.NET 2.

Sempre que desejar obter a parte do nome do arquivo carregada, você deve aparar o caminho completo do nome do arquivo. Esta informação é completamente irrelevante para você. Veja também, por exemplo, este Apache Commons FileUpload FAQ entry

Por que FileItem.getName () retorna o caminho inteiro e não apenas o nome do arquivo?

O Internet Explorer fornece todo o caminho para o arquivo carregado e não apenas o nome do arquivo base. Como o FileUpload fornece exatamente o que foi fornecido pelo cliente (navegador), convém remover essas informações de caminho no seu aplicativo.

60
BalusC

Para visualização no Firefox funciona isso - o anexo é objeto do elemento de anexo no primeiro exemplo:

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

Na verdade, pouco antes do lançamento do FF3, fiz algumas experiências e o FF2 envia apenas o nome do arquivo, como o Opera 9.0. Somente IE envia o caminho completo. O comportamento faz sentido, porque o servidor não precisa saber onde o usuário armazena o arquivo em seu computador, é irrelevante para o processo de upload. A menos que você esteja escrevendo um aplicativo de intranet e obtenha o arquivo por acesso direto à rede!

O que mudou (e esse é o ponto real do item de bug que você aponta) é que o FF3 não permite mais o acesso ao caminho do arquivo a partir do JavaScript. E não deixarei digitar/colar um caminho lá, o que é mais irritante para mim: tenho uma extensão do Shell que copia o caminho de um arquivo do Windows Explorer para a área de transferência e o usei muito dessa forma. Resolvi o problema usando a extensão DragDropUpload. Mas isso se torna fora de tópico, eu temo.

Gostaria de saber o que seus formulários da Web estão fazendo para parar de trabalhar com esse novo comportamento.

[EDIT] Depois de ler a página vinculada por Mike, eu vejo de fato usos na intranet do caminho (identificamos um usuário, por exemplo) e usos locais (mostra a visualização de uma imagem, gerenciamento local de arquivos). Os Jam-es do usuário parecem fornecer uma solução alternativa com o nsIDOMFile (ainda não tentado).

2
PhiLho

Não podemos obter o caminho completo do arquivo no FF3. O abaixo pode ser útil para a personalização do componente Arquivo.

<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

Esta é uma solução/correção alternativa ... No FF3, você pode recuperar o caminho completo do arquivo em uma caixa de texto em vez da caixa de pesquisa de arquivos. E isso também ... Ao arrastar/soltar o arquivo!

Você pode arrastar o arquivo para uma caixa de texto na sua página html. e exibirá o caminho completo do arquivo. Esses dados podem ser transferidos para o seu servidor facilmente ou manipulados.

Tudo que você precisa fazer é usar a extensão DragDropUpload

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

Esta extensão ajuda você a arrastar e soltar arquivos para a sua caixa Procurar arquivos (arquivo de entrada). Mas você ainda não conseguirá obter o caminho completo do arquivo, se tentar recuperar.

Então, ajustei um pouco essa extensão. Da maneira que posso arrastar, solte um arquivo em qualquer caixa "Entrada de texto" e obtenha o caminho completo do arquivo. E, assim, posso obter o caminho completo do arquivo no FF3 Firefox 3.

0
Kumaresan

Simplesmente você não pode fazer isso com o FF3.

A outra opção pode estar usando o applet ou outros controles para selecionar e fazer upload de arquivos.

0
roh

Uma maneira extremamente feia de resolver isso é fazer o usuário digitar manualmente o diretório em uma caixa de texto e adicioná-lo novamente à frente do valor do arquivo no JavaScript.

Confuso ... mas isso depende do nível do usuário com o qual você está trabalhando e contorna o problema de segurança.

<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

Dê uma olhada em XPCOM , pode haver algo que você pode usar se o Firefox 3 for usado por um cliente.

0
LohanJ

Este é um exemplo que poderia funcionar para você, se o que você precisa não é exatamente o caminho, mas uma referência ao arquivo que funciona offline.

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

Está em francês, mas o código é javascript :)

Estas são as referências para as quais o artigo aponta: http://developer.mozilla.org/en/nsIDOMFilehttp://developer.mozilla.org/en/nsIDOMFileList

0
Victor