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

Question

提问by m_pGladiator

We have simple HTML form with <input type="file">, like shown below:

我们有一个带有的简单 HTML 表单<input type="file">，如下所示：

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

In IE7 (and probably all famous browsers, including old Firefox 2), if we submit a file like '//server1/path/to/file/filename' it works properly and gives the full path to the file and the filename.

在 IE7（可能还有所有著名的浏览器，包括旧的 Firefox 2）中，如果我们提交一个像“//server1/path/to/file/filename”这样的文件，它可以正常工作并提供文件的完整路径和文件名。

In Firefox 3, it returns only 'filename', because of their new 'security feature' to truncate the path, as explained in Firefox bug tracking system (https://bugzilla.mozilla.org/show_bug.cgi?id=143220)

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

I have no clue how to overcome this 'new feature' because it causes all upload forms in my webapp to stop working on Firefox 3.

我不知道如何克服这个“新功能”，因为它会导致我的 web 应用程序中的所有上传表单停止在 Firefox 3 上工作。

Can anyone help to find a single solution to get the file path both on Firefox 3 and IE7?

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

Answer 1

回答by BalusC

In IE7 (and probably all famous browsers, including old Firefox 2), if we submit a file like '//server1/path/to/file/filename' it works properly and gives the full path to the file and the filename.
I have no clue how to overcome this 'new feature' because it causes all upload forms in my webapp to stop working on Firefox 3.

在 IE7（可能还有所有著名的浏览器，包括旧的 Firefox 2）中，如果我们提交一个像“//server1/path/to/file/filename”这样的文件，它会正常工作并提供文件的完整路径和文件名。
我不知道如何克服这个“新功能”，因为它会导致我的 web 应用程序中的所有上传表单停止在 Firefox 3 上工作。

There's a major misunderstanding here. Why do you ever need the fullfile path on the server side? Imagine that I am the client and I have a file at C:\path\to\passwords.txtand I give the full file path to you. How would you as being a server ever get its contents? Do you have an open TCP connection to my local disk file system? Did you test the file upload functionality when you've brought your webapp into production on a different server machine?

这里有一个重大的误解。为什么你需要服务器端的完整文件路径？想象一下，我是客户，我有一个文件，C:\path\to\passwords.txt我将完整的文件路径提供给您。作为服务器，您将如何获取其内容？你有一个到我本地磁盘文件系统的开放 TCP 连接吗？当您在不同的服务器机器上将您的 web 应用程序投入生产时，您是否测试了文件上传功能？

It will only work when boththe client and server runs at physically the samemachine, because you will then have the access to the samehard disk file system. This would only occur when you're locally developing your website and thus both the webbrowser (client) and webserver (server) by coincidence runs at the same machine.

它只会工作的时候都在客户端和服务器运行在物理上是相同的机器，因为你再有访问相同的硬盘文件系统。这只会在您本地开发网站时发生，因此网络浏览器（客户端）和网络服务器（服务器）巧合地在同一台机器上运行。

That the full file path is being sent in MSIE and other ancient webbrowsers is due to a security bug. The W3and RFC2388specifications have never mentioned to include the full file path. Only the file name. Firefox is doing its job correctly.

在 MSIE 和其他古老的 web 浏览器中发送完整文件路径是由于安全错误。在W3和RFC2388从未提及的规格，包括完整的文件路径。只有文件名。Firefox 正确地完成了它的工作。

To handle uploaded files, you should not need to know the full file path. You should rather be interested in the full file contentswhich the client has already sent to the server in the request body in case of a multipart/form-datarequest. Change your form to look like the following as stated in RFC2388:

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

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

How to obtain the contents of the uploaded file in the server side depends on the server side programming language you're using.

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

Java/JSP: you'd like to use HttpServletRequest#getPart()or Apache Commons FileUpload APIto parse it. You should end up with an InputStreamwith the file contents which you in turn can write to any OutputStreamto your taste. You can find an example in this answer.
Java/JSF: you'd like to use <h:inputFile>component or any other file upload component provided by the component library you're using. Also here, you'd like to obtain the file contents in flavor of an InputStream. See this answerfor an example.
PHP: the file contents is already implicitly stored on the temp disk. You'd like to use move_uploaded_file()function to move it to the desired location. See also PHP manual.
ASP.NET: no detailed answer from me since I don't do it, but Google has found some examples for me: ASP.NET example, ASP.NET 2.0 example

Java / JSP的：你想使用HttpServletRequest#getPart()或Apache的百科全书文件上传API来解析它。您应该最终得到一个InputStream文件内容，您可以OutputStream根据自己的喜好将其写入任何内容。你可以在这个答案中找到一个例子。
Java/JSF：您想使用<h:inputFile>组件或您正在使用的组件库提供的任何其他文件上传组件。同样在这里，您想以InputStream. 有关示例，请参阅此答案。
PHP：文件内容已经隐式存储在临时磁盘上。您想使用move_uploaded_file()函数将其移动到所需位置。另请参阅PHP 手册。
ASP.NET：我没有详细回答，因为我不这样做，但 Google 为我找到了一些示例：ASP.NET 示例，ASP.NET 2.0 示例

Whenever you want to obtain the file name part of the uploaded file, you should trimthe full path off from the file name. This information is namely completely irrelevant to you. Also see for example this Apache Commons FileUpload FAQ entry

每当您想要获取上传文件的文件名部分时，您应该从文件名中删除完整路径。这些信息与您完全无关。另请参阅此Apache Commons FileUpload FAQ 条目

Why does FileItem.getName() return the whole path, and not just the file name?
Internet Explorer provides the entire path to the uploaded file and not just the base file name. Since FileUpload provides exactly what was supplied by the client (browser), you may want to remove this path information in your application.

为什么 FileItem.getName() 返回整个路径，而不仅仅是文件名？
Internet Explorer 提供了上传文件的完整路径，而不仅仅是基本文件名。由于 FileUpload 提供的正是客户端（浏览器）提供的内容，因此您可能希望在应用程序中删除此路径信息。

Answer 2

回答by houba

For preview in Firefox works this - attachment is object of attachment element in first example:

对于 Firefox 中的预览，这个工作 - 附件是第一个示例中附件元素的对象：

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

Answer 3

回答by Jay

We can't get complete file path in FF3. The below might be useful for File component customization.

我们无法在 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>

Answer 4

回答by PhiLho

Actually, just before FF3 was out, I did some experiments, and FF2 sends only the filename, like did Opera 9.0. Only IE sends the full path. The behavior makes sense, because the server doesn't have to know where the user stores the file on his computer, it is irrelevant to the upload process. Unless you are writing an intranet application and get the file by direct network access!

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

What have changed (and that's the real point of the bug item you point to) is that FF3 no longer let access to the file path from JavaScript. And won't let type/paste a path there, which is more annoying for me: I have a shell extension which copies the path of a file from Windows Explorer to the clipboard and I used it a lot in such form. I solved the issue by using the DragDropUpload extension. But this becomes off-topic, I fear.

有什么改变（这就是你指出的错误项的真正重点）是 FF3 不再允许从 JavaScript 访问文件路径。并且不会让在那里输入/粘贴路径，这对我来说更烦人：我有一个 shell 扩展，它将文件的路径从 Windows 资源管理器复制到剪贴板，我以这种形式使用了很多。我通过使用 DragDropUpload 扩展解决了这个问题。但我担心这会成为题外话。

I wonder what your Web forms are doing to stop working with this new behavior.

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

[EDIT] After reading the page linked by Mike, I see indeed intranet uses of the path (identify a user for example) and local uses (show preview of an image, local management of files). User Jam-es seems to provide a workaround with nsIDOMFile (not tried yet).

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

Answer 5

回答by PhiLho

This is an alternate solution/fix... In FF3, You can retrieve file's full path in a textbox instead of file browse box. And that too... By drag/dropping the file!

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

You can drag drop your file into a text box in your html page. and it will display the file's complete path. This data can transferred to your server easily or manipulate them.

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

All you have to do is to use the extension DragDropUpload

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

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

This extension will helps you in drag dropping files into your File Browse (Input file) box. But still you wont able to get the file full path, If you try to retrieve.

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

So, I tweaked this extension a little. In the way I can drag drop a file on to any "Text Input" box and get the file full path. And thus I can able to get the file full path in FF3 Firefox 3.

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

Answer 6

回答by PhiLho

One extremely ugly way to resolve this is have the user manually type the directory into a text box, and add this back to the front of the file value in the JavaScript.

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

Messy... but it depends on the level of user you are working with, and gets around the security issue.

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

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

Answer 7

回答by PhiLho

Simply you cannot do it with FF3.

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

The other option could be using applet or other controls to select and upload files.

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

Answer 8

回答by LohanJ

Have a look at XPCOM, there might be something that you can use if Firefox 3 is used by a client.

看看XPCOM，如果客户端使用 Firefox 3，您可能可以使用一些东西。

Answer 9

回答by Victor

This is an example that could work for you if what you need is not exactly the path, but a reference to the file working offline.

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

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

It is in french, but the code is javascript :)

它是法语的，但代码是 javascript :)

This are the references the article points to: http://developer.mozilla.org/en/nsIDOMFile http://developer.mozilla.org/en/nsIDOMFileList

这是文章指向的参考资料：http: //developer.mozilla.org/en/nsIDOMFile http://developer.mozilla.org/en/nsIDOMFileList

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

提问by m_pGladiator

回答by BalusC

Why does FileItem.getName() return the whole path, and not just the file name?

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

回答by houba

回答by Jay

回答by PhiLho

回答by PhiLho

回答by PhiLho

回答by PhiLho

回答by LohanJ

回答by Victor

相关推荐

最近更新

标签

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

提问by m_pGladiator

回答by BalusC

Why does FileItem.getName() return the whole path, and not just the file name?

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

回答by houba

回答by Jay

回答by PhiLho

回答by PhiLho

回答by PhiLho

回答by PhiLho

回答by LohanJ

回答by Victor

相关推荐

Html 如何解决与表格单元格、文本装饰和填充相关的 IE11 布局错误？

Html 编码为 data-uri 的空白图像

减少 HTML 表格行高

如何在 HTML 中创建指向脚注的链接？

相关推荐

最近更新

标签