Talking about the problem that the file control in FireFox cannot get the full path of the Client file

Source: Internet
Author: User
I believe many people have used HTML controls such as <input type = "file"/>, which look very common, it is an indispensable Control for uploading local files on the client in a Web application, recently, however, I found that this control has lost its effect in the latest FireFox browser (or the latest IE8, as a result, the value obtained through the value attribute of this control only contains the file name but does not have the file path, in IE7, the full file name can be obtained normally (that is, the complete file path + file name ). IE7 and most popular browsers (such as FireFox2) can obtain the file path, but FireFox3 does not. I checked a lot of information, fireFox3 was found to be a vulnerability that may cause security problems in earlier versions. It is said that hackers will upload files to the server through this security risk of FireFox! In fact, I still don't understand, isn't it the path of the local file? How can it affect server security? It seems that the experts are really strong !!
Let's explain why I want to get the path of the locally selected file. As you all know, the 163 mailbox allows you to select multiple attachments when uploading email attachments. The function I want to do is similar to this, however, I don't want to study how 163 implements this function here. I just want to dynamically add the information of the selected file and a delete button to a Div when the user selects the file, the file information is stored in a hidden domain on the page. When you save the page, the server code uploads the selected file to the server based on the information in the hidden domain. Of course, the information in the hidden domain of the page must contain at least the path of the locally selected file. Otherwise, you do not know where to find the file. How to add HTML nodes dynamically is not the focus of this article. I will not post code here. The following describes my problems.
The following is a piece of code for testing the problem.
(Autumn wind: omitted)

How can I obtain the path of a local file in FireFox3? Just like the value I got in IE7! For the moment, let's talk about how to upload a file in firefox3. Since the method for obtaining the path of the local file in FireFox3 is forbidden as a security risk, it must have a related method to solve this problem, otherwise, FireFox3 will not be able to upload files on the client, as one of my colleagues said two days ago. If so, FireFox will be useless! In fact, a new interface is introduced in FireFox3 to solve this problem, that is, nsIDOMFile, which is used to obtain file data from the input type = "file" control of the client, in this way, you can save local files to the server. This is a very good solution, so that it is much easier for us to develop such an application in FireFox3 to simply obtain the value and then upload the file through the server code, however, it is worrying that this interface only applies to FireFox and is not supported in IE and other browsers. Let's talk about how to solve the browser compatibility problem later. Let's first look at how to use nsIDOMFile in firefox3.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> input type = file & Firefox 3 </title>
</Head>

<Body>

<H1> input type = file & Firefox 3
<Script type = "text/javascript">
// <! [CDATA [

Function inputFileOnChange (){
If (document. getElementById ('My-file'). files ){
// Support: nsIDOMFile, nsIDOMFileList
Alert ('value: '+ document. getElementById ('My-file'). value );
Alert ('files. length: '+ document. getElementById ('My-file'). files. length );
Alert ('filename: '+ document. getElementById ('My-file'). files. item (0). fileName );
Alert ('filesize: '+ document. getElementById ('My-file'). files. item (0). fileSize );
Alert ('dataurl: '+ document. getElementById ('My-file'). files. item (0). getAsDataURL ());
Alert ('data: '+ document. getElementById ('My-file'). files. item (0). getAsBinary ());
Alert ('ext Ext: '+ document. getElementById ('My-file'). files. item (0). getAsText ("UTF-8 "));
};
};

//]>
</Script>

<Div>
<Input type = "file" name = "my-file" id = "my-file" onchange = "inputFileOnChange ();"/>
</Div>

</Body>
</Html>
Document. getElementById ('My-file '). the files method is used to obtain the set of files selected by the user. Generally, a single file is selected (it seems that FireFox supports multi-file selection, but it has not been tried, readers can try it by themselves). The item array can get a file, and then we can use the attributes and methods provided by nsIDOMFile. It includes two attributes and three methods:
FileName: Gets the name of the file selected by the user, which is the same as the result obtained by directly obtaining the value.
FileSize: Get the size of the selected file.
GetAsBinary (): Obtain the binary data of the selected file.
GetAsDataURL (): Obtain the path of the file selected by the user. The path is encrypted and can only be used in FireFox currently.
GetAsText (): Get the text of the specified character encoding for the selected file.
Reader can refer to this address: https://developer.mozilla.org/en/nsIDOMFile
One thing to note is that the method getAsDataURL () can obtain the local path of the selected file, but the string text of this path is encrypted by FireFox, and this ciphertext can only be recognized by FireFox, other browsers cannot be identified. That is to say, I directly assign the encrypted path to the src attribute of an img tag, and the image can be directly displayed in FireFox, but not in IE. From this point of view, does FireFox look a little arrogant? Not even the well-known IE!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.