Add and delete dynamic File Upload buttons using js and jquery
This article introduces how to use js and jquery to add and delete dynamic file upload operation buttons. The example is as follows.
Javascript implementation
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jquery File Upload </title>
<Script type = "text/javascript" src = "jquery-1.7.2.js"> </script>
<Script type = "text/javascript">
Var addMore = function (){
Var div = document. getElementById ("div2 ");
Var br = document. createElement ("br ");
Var input = document. createElement ("input ");
Var button = document. createElement ("input ");
Input. setAttribute ("type", "file ");
Button. setAttribute ("type", "button ");
Button. setAttribute ("value", "Remove ");
Button. onclick = function (){
Div. removeChild (br );
Div. removeChild (input );
Div. removeChild (button );
}
Div. appendChild (br );
Div. appendChild (input );
Div. appendChild (button );
}
// Move the node
// $ (Function (){
//});
</Script>
</Head>
<Body>
<Div id = "div1">
<Input type = "file" id = "upload"/>
<Input type = "button" id = "btn" value = "more" onclick = "addMore ();"/>
</Div>
<Div id = "div2"> </div>
</Body>
</Html>
Jquery implementation
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jquery File Upload </title>
<Title> jquery1 </title>
<Script type = "text/javascript" src = "jquery-1.7.2.js"> </script>
<Script type = "text/javascript">
/** Var addMore = function (){
Var div = document. getElementById ("div2 ");
Var br = document. createElement ("br ");
Var input = document. createElement ("input ");
Var button = document. createElement ("input ");
Input. setAttribute ("type", "file ");
Button. setAttribute ("type", "button ");
Button. setAttribute ("value", "Remove ");
Button. onclick = function (){
Div. removeChild (br );
Div. removeChild (input );
Div. removeChild (button );
}
Div. appendChild (br );
Div. appendChild (input );
Div. appendChild (button );
}**/
// Add and delete buttons for file upload using jquery
$ (Function (){
$ ("Input [type = button]"). click (function (){
Var br = $ ("<br> ");
Var input = $ ("<input type = 'file'/> ");
Var button = $ ("<input type = 'button 'value = 'delete'/> ");
$ ("# Div1"). append (br). append (input). append (button );
Button. click (function (){
Br. remove ();
Input. remove ();
Button. remove ();
});
});
});
</Script>
</Head>
<Body>
<Div id = "div1">
<Input type = "file" id = "upload"/>
<Input type = "button" id = "btn" value = "more" onclick = "addMore ();"/>
</Div>
<Div id = "div2"> </div>
</Body>
</Html>