如何在Firefox 3中从HTML输入表单获取文件路径
我们有带有<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 Bug跟踪系统中所述(https://bugzilla.mozilla.org/show_bug.cgi?id=143220)
我不知道如何克服这个"新功能"，因为它会使我的Web应用程序中的所有上传表单停止在Firefox 3上运行。
谁能帮忙找到一个解决方案来在Firefox 3和IE7上获取文件路径？
解决方案
回答
简而言之，我们无法使用FF3做到这一点。
另一个选项可能是使用applet或者其他控件来选择和上传文件。
回答
看一下XPCOM，如果客户端使用Firefox 3，则可能会使用某些东西。
回答
如果我们需要的不是确切的路径，而是对脱机工作文件的引用，那么这是一个对我们有用的示例。
http://www.ab-d.fr/date/2008-07-12/
它是法语，但是代码是javascript :)
这是本文指向的参考：
http://developer.mozilla.org/en/nsIDOMFile
http://developer.mozilla.org/en/nsIDOMFileList
回答
实际上，就在FF3推出之前，我做了一些实验，FF2仅发送文件名，就像Opera 9.0一样。仅IE发送完整路径。这种行为是有道理的，因为服务器不必知道用户在计算机上存储文件的位置，因此与上传过程无关。除非我们正在编写Intranet应用程序并通过直接网络访问来获取文件！
发生了什么变化(这就是我们所指的错误项的真正意义)是FF3不再允许从JavaScript访问文件路径。而且不要在其中键入/粘贴路径，这对我来说比较烦人：我有一个shell扩展，它将文件的路径从Windows资源管理器复制到剪贴板，并且我经常以这种形式使用它。我通过使用DragDropUpload扩展解决了该问题。但是，我担心这变成了题外话。
我想知道Web窗体正在做什么以停止使用这种新行为。
[编辑]阅读Mike链接的页面后，我确实看到该路径的Intranet使用(例如，标识用户)和本地使用(显示图像预览，文件本地管理)。用户Jam-es似乎为nsIDOMFile提供了一种解决方法(尚未尝试)。
回答
这是一个替代解决方案/解决方案...在FF3中，我们可以在文本框中而不是文件浏览框中检索文件的完整路径。还有...通过拖放文件！
我们可以将文件拖放到html页面的文本框中。它将显示文件的完整路径。这些数据可以轻松地传输到服务器或者进行操作。
所有我们需要做的就是使用扩展名DragDropUpload
http://www.teslacore.it/wiki/index.php?title=DragDropUpload
此扩展名将将文件拖放到"文件浏览(输入文件)"框中。但是，如果我们尝试检索，则仍然无法获取文件的完整路径。
因此，我对该扩展进行了一些微调。以这种方式，我可以将文件拖放到任何"文本输入"框中，并获得文件的完整路径。因此，我可以在FF3 Firefox 3中获取文件的完整路径。
回答
解决此问题的一种极其丑陋的方法是让用户手动在文本框中键入目录，然后将其添加回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;
回答
为了在Firefox中进行预览，在第一个示例中，此附件是附件元素的对象：
if (attachment.files)
previewImage.src = attachment.files.item(0).getAsDataURL();
else
previewImage.src = attachment.value;
回答
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.
这里有一个主要的误解。为什么在服务器端需要完整的文件路径？假设我是客户端，并且在C：\ path \ to \ passwords.txt中有一个文件，并且将完整的文件路径提供给我们。作为服务器，我们将如何获取其内容？我们是否有到本地磁盘文件系统的开放式TCP连接？将Web应用程序在其他服务器上投入生产后，是否测试了文件上传功能？
只有当客户端和服务器都在同一台计算机上运行时，它才起作用，因为我们将可以访问同一硬盘文件系统。仅当我们在本地开发网站时，Webbrowser(客户端)和Webserver(服务器)同时运行在同一台计算机上时，才会发生这种情况。
完整文件路径正在MSIE和其他古老的网络浏览器中发送是由于安全漏洞。 W3和RFC2388规范从未提及包含完整文件路径。仅文件名。 Firefox可以正常工作。
要处理上传的文件，我们不需要知道完整的文件路径。如果有" multipart / form-data"请求，我们应该对客户端已在请求正文中发送给服务器的完整文件内容感兴趣。更改表单，使其外观类似于RFC2388中所述：
<form action="upload-script-url" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit">
</form>
如何在服务器端获取上载文件的内容取决于我们使用的服务器端编程语言。
- Java / JSP：我们想使用HttpServletRequest＃getPart()或者Apache Commons FileUpload API对其进行解析。我们应该以带有文件内容的
InputStream结尾，而文件内容又可以写入我们喜欢的任何OutputStream中。我们可以在此答案中找到一个示例。 - Java / JSF：我们想使用
<h：inputFile>组件或者我们正在使用的组件库提供的任何其他文件上载组件。同样在这里，我们想获得具有InputStream风格的文件内容。有关示例，请参见此答案。 - PHP：文件内容已隐式存储在临时磁盘上。我们想使用
move_uploaded_file()函数将其移动到所需位置。另请参见PHP手册。 - ASP.NET：我没有提供详细的答案，因为我没有这样做，但是Google为我找到了一些示例：ASP.NET示例，ASP.NET 2.0示例
每当我们要获取上载文件的文件名部分时，都应修剪掉文件名的完整路径。该信息即与我们完全无关。另请参见例如此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.
回答
我们无法在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<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>
