问题
We have simple HTML form with <input type=\"file\">, like shown below:
<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.
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)
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.
Can anyone help to find a single solution to get the file path both on Firefox 3 and IE7?
回答1:
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.
There's a major misunderstanding here. Why do you ever need the full file path on the server side? Imagine that I am the client and I have a file at C:\path\to\passwords.txt and 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?
It will only work when both the client and server runs at physically the same machine, because you will then have the access to the same hard 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 W3 and RFC2388 specifications have never mentioned to include the full file path. Only the file name. Firefox is doing its job correctly.
To handle uploaded files, you should not need to know the full file path. You should rather be interested in the full file contents which the client has already sent to the server in the request body in case of a multipart/form-data request. Change your form to look like the following as stated in 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 API to parse it. You should end up with an
InputStreamwith the file contents which you in turn can write to anyOutputStreamto 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 answer for 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
Whenever you want to obtain the file name part of the uploaded file, you should trim the 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
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.
回答2:
For preview in Firefox works this - attachment is object of attachment element in first example:
if (attachment.files)
previewImage.src = attachment.files.item(0).getAsDataURL();
else
previewImage.src = attachment.value;
回答3:
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!
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.
I wonder what your Web forms are doing to stop working with this new behavior.
[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).
回答4:
We can't get complete file path in FF3. The below might be useful for File component customization.
<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>
回答5:
Simply you cannot do it with FF3.
The other option could be using applet or other controls to select and upload files.
回答6:
Have a look at XPCOM, there might be something that you can use if Firefox 3 is used by a client.
回答7:
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.
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;
回答8:
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!
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.
All you have to do is to use the extension 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.
回答9:
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 :)
This are the references the article points to: http://developer.mozilla.org/en/nsIDOMFile http://developer.mozilla.org/en/nsIDOMFileList
来源：https://stackoverflow.com/questions/81180/how-to-get-the-file-path-from-html-input-form-in-firefox-3