it-swarm.cn

如何从Firefox 3中的HTML输入表单获取文件路径

我们有简单的HTML表单和<input type="file">,如下所示:

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

在IE7(可能是所有着名的浏览器,包括旧的Firefox 2)中,如果我们提交像'// server1/path/to/file/filename'这样的文件,它可以正常工作,并提供文件和文件名的完整路径。

在Firefox 3中,它只返回'filename',因为它们用于截断路径的新“安全功能”,如Firefox错误跟踪系统中所述( https://bugzilla.mozilla.org/show_bug.cgi?id= 143220

我不知道如何克服这个“新功能”,因为它导致我的webapp中的所有上传表单停止在Firefox 3上运行。

任何人都可以帮助找到一个解决方案来获取Firefox 3和IE7上的文件路径?

51
m_pGladiator

在IE7(可能是所有着名的浏览器,包括旧的Firefox 2)中,如果我们提交像'// server1/path/to/file/filename'这样的文件,它可以正常工作,并提供文件和文件名的完整路径。

我不知道如何克服这个“新功能”,因为它导致我的webapp中的所有上传表单停止在Firefox 3上运行。

这里有一个重大的误解。为什么在服务器端需要full文件路径?想象一下,我是客户端,我在C:\path\to\passwords.txt有一个文件,我给你完整的文件路径。作为一个服务器,你将如何得到它的内容?你有一个打开TCP连接到我的本地磁盘文件系统?您是否在其他服务器计算机上将Web应用程序投入生产时是否测试了文件上载功能?

它只会在both客户端和服务器在 物理上相同 machine时运行,因为您可以访问相同硬盘文件系统。这只会在您本地开发您的网站时发生,因此巧合的webbrowser(客户端)和Web服务器(服务器)都在同一台机器上运行。

在MSIE和其他古老的webbrowsers中发送完整的文件路径是由于安全漏洞W3RFC2388 规范从未提及包含完整文件路径。只有文件名。 Firefox正确地完成了它的工作。

要处理上载的文件,您不需要知道完整的文件路径。您应该对multipart/form-data请求中客户端已经发送到请求正文中的服务器的完整文件 contents 感兴趣。将表单更改为RFC2388中所述的以下内容:

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

如何在服务器端获取上载文件的内容取决于您正在使用的服务器端编程语言。

每当您想获取上传文件的文件名部分时,您应该 trim 从文件名中删除完整路径。这些信息与您完全无关。另请参见例如 Apache Commons FileUpload FAQ entry

为什么FileItem.getName()返回整个路径,而不仅仅是文件名?

Internet Explorer提供上载文件的完整路径,而不仅仅是基本文件名。由于FileUpload完全提供客户端(浏览器)提供的内容,因此您可能希望在应用程序中删除此路径信息。

60
BalusC

对于在Firefox中预览的工作原理 - 附件是第一个示例中的附件元素的对象:

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

实际上,就在FF3出来之前,我做了一些实验,FF2只发送了文件名,就像Opera 9.0一样。只有IE发送完整路径。这种行为是有道理的,因为服务器不必知道用户在其计算机上存储文件的位置,这与上载过程无关。除非您正在编写Intranet应用程序并通过直接网络访问获取文件!

改变了什么(这是你指出的错误项目的真正意义)是FF3不再允许从JavaScript访问文件路径。并且不会在那里输入/粘贴路径,这对我来说更烦人:我有一个Shell扩展,它将文件的路径从Windows资源管理器复制到剪贴板,我在这种形式中使用了很多。我通过使用DragDropUpload扩展解决了这个问题。但我担心这会成为偏离主题的。

我想知道你的Web表单正在做什么来停止使用这种新行为。

[编辑]阅读Mike链接的页面后,我看到内部网使用了路径(例如识别用户)和本地用途(显示图像的预览,文件的本地管理)。用户Jam-es似乎提供了nsIDOMFile的解决方法(尚未尝试)。

2
PhiLho

我们无法在FF3中获得完整的文件路径。以下内容可能对文件组件自定义很有用。

<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

这是一个替代解决方案/修复...在FF3中,您可以在文本框中检索文件的完整路径,而不是文件浏览框。那也是......通过拖放文件!

您可以将文件拖放到html页面的文本框中。它将显示文件的完整路径。这些数据可以轻松传输到您的服务器或操纵它们。

您所要做的就是使用扩展DragDropUpload

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

此扩展程序将帮助您将文件拖放到文件浏览(输入文件)框中。但是你仍然无法获得文件的完整路径,如果你试图检索。

所以,我稍微调整了这个扩展。在这种方式,我可以将文件拖放到任何“文本输入”框,并获取文件的完整路径。因此我可以在FF3 Firefox 3中获得文件的完整路径。

0
Kumaresan

只是你不能用FF3做到这一点。

另一个选项可能是使用applet或其他控件来选择和上传文件。

0
roh

解决此问题的一种非常难看的方法是让用户手动将目录键入文本框,然后将其添加回JavaScript中文件值的前面。

凌乱......但这取决于您正在使用的用户级别,并解决安全问题。

<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

看看 _ xpcom _ ,如果客户端使用Firefox 3,可能会有一些东西可以使用。

0
LohanJ

如果您需要的不完全是路径,而是对脱机工作的文件的引用,那么这个示例可能对您有用。

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

它是法语,但代码是javascript :)

这是文章指出的参考: http://developer.mozilla.org/en/nsIDOMFilehttp://developer.mozilla.org/en/nsIDOMFileList

0
Victor