Home > Developer > JavaScript
Sample Code for js to retrieve and clear input type = "file" Values
This article mainly introduces the sample code for getting and clearing the value of input type = "file" in js. If you need it, you can refer to it for help.
Basic knowledge about upload controls:
The upload control (<input type = "file"/>) is used to browse and upload files on the client. The path selected by the user can be obtained by the value attribute, but the value attribute is read-only, the value cannot be assigned through javascript, so that it cannot be cleared through the value = "" statement. It is easy to understand why it is read-only. If you can assign a value at will, you can upload files on your computer as you like by simply opening your webpage.
Js gets the value of <intput type = file/>
The Code is as follows:
<Html>
<Script language = 'javascript '>
Function show (){
Var p = document. getElementById ("file1"). value;
Document. getElementById ("s"). innerHTML = "<input id = pic type = image height = 96 width = 128/> ";
Document. getElementById ("pic"). src = p;
Alert (p );
}
</Script>
<Head>
<Title> MyHtml.html </title>
</Head>
<Body>
<Input type = "file" name = "file1" id = "file1" onpropertychange = "show ();"/>
<Span id = "s"> </span>
</Body>
</Html>
Two Methods for clearing the value of the upload control (<input type = "file"/>)
Method 1:
The Code is as follows:
<Span id = span1>
<Input name = AB type = file>
</Span>
<Input name = button1 type = button value = "Press" onclick = show ()>
<Script language = javascript>
Function show ()
{
Document. getElementById ("span1"). innerHTML = "<input name = AB type = file> ";
}
</Script>
Method 2:
The Code is as follows:
Function clearFileInput (file ){
Var form = document. createElement ('form ');
Document. body. appendChild (form );
// Remember the position of the file in the old form
Var pos = file. nextSibling;
Form. appendChild (file );
Form. reset ();
Pos. parentNode. insertBefore (file, pos );
Document. body. removeChild (form );
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
