Home > Others

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

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
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!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
wordpress the field full path of file get file path in php how to get file path in php get file path wordpress get file path file get path

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More