Web Front-end
JS Tutorial
js gets and clears the value of input type='file' (sample code)_javascript skills
js gets and clears the value of input type='file' (sample code)_javascript skills
May 16, 2016 pm 05:07 PMThe 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 and cannot be accessed through javascript. Assignment, which makes it impossible to clear it through the value="" statement. It is easy to understand why it is read-only. If the value can be assigned at will, then as long as the user opens your web page, you can upload the files on his computer as he likes.
js gets the value of <intput type=file />
<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 to clear the value of the upload control (<input type="file"/>)
Method 1:
<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:
function clearFileInput(file){
var form=document.createElement('form');
document.body.appendChild(form);
//Remember the position of file in the old form
var pos=file.nextSibling;
form.appendChild(file);
form.reset();
pos.parentNode .insertBefore(file,pos);
document.body.removeChild(form);
}
Hot Article
Hot tools Tags
Hot Article
Hot Article Tags
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use JS and Baidu Maps to implement map pan function
Nov 21, 2023 am 10:00 AM
How to use JS and Baidu Maps to implement map pan function
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Recommended: Excellent JS open source face detection and recognition project
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
How to create a stock candlestick chart using PHP and JS
Dec 17, 2023 am 08:08 AM
How to create a stock candlestick chart using PHP and JS
How to use JS and Baidu Maps to implement map polygon drawing function
Nov 21, 2023 am 10:53 AM
How to use JS and Baidu Maps to implement map polygon drawing function
How to use JS and Baidu Map to implement map click event processing function
Nov 21, 2023 am 11:11 AM
How to use JS and Baidu Map to implement map click event processing function
