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

【问题标题】：How to get the file path from HTML input form in Firefox 3如何从 Firefox 3 中的 HTML 输入表单获取文件路径
【发布时间】：2010-09-10 00:27:06
【问题描述】：

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

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

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

谁能帮助找到一个解决方案来获取 Firefox 3 和 IE7 上的文件路径？

【问题讨论】：

理论上您应该需要完整的文件路径，因为一旦将其发送到上游，您将使用自己的文件夹结构存储它。
我认为是时候接受 BalusC 的回答了……

标签： html file-upload firefox-3

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

你不能用 FF3 做到这一点。

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

解决此问题的一种极其难看的方法是让用户手动将目录键入文本框中，然后将其添加回 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;

【讨论】：

【解决方案7】：

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

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

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

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

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

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

【讨论】：

是否还有另一个指向 DragDropUpload 的链接？提供的链接似乎无效。

【解决方案8】：

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

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

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

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

【讨论】：