Input type = file label forbidden for manual input

Conventional Web ApplicationsProgramWhen uploading files, the <input type = "file"/> control is used. When uploading files, Click Browse, in the pop-up file selection dialog box, select the local file to be uploaded. Of course, if you already know the local path of the file to be uploaded, you can also copy the path to the control input box (for example, the path of the file to be selected is particularly long ). This poses a problem. If the copied file path does not exist, the file cannot be correctly obtained during the upload, in addition, JavaScript does not determine whether the file selected by the control exists. This involves browser security. In most cases, we cannot use JavaScript to operate local files on the client.

How can this problem be solved?

In fact, this control has been restricted in Firefox and IE8. If you view a page with the </input type = "file"> label in these two browsers, users are not allowed to enter the file directly. You can only click "Browse" to select a file. This effectively ensures the validity of the selected file. However, it can still be entered in IE7 and some earlier browsers. At this time, some restrictions on this control are required. The following method can be used:

1. Alternative Method

Use the hidden <input type = "file"/> control, and then use a read-only text box and a button to simulate the <input type = "file"/> function.

< Input Type = "File" Name = "File" Onpropertychange = "File1.value = This. Value" Style = Display: None />
< Input Type = "Text" Name = "File1" Readonly />
< Input Type = "Button" Value = "Browse" ID = "Button1" Name = "Button1" Onclick = "File. Click ()" />

2. Use the script event to restrict the input of controls

Restrict the right-click menu and button events of the <input type = "file"/> control to prevent users from entering the control.

< Input Type = "File" Onkeydown = "Return false" Onkeyup = "Return false" Oncontextmenu = "Return false" >

3. Use the contenteditable attribute

This attribute can be used to effectively restrict users from manually entering content in the <input type = "file"/> control, and select a file only in the file selection dialog box.

< Input Type = "File" ID = "File1" Contenteditable = "False"   />