Home > Developer > JavaScript
<! 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> use the DOM method to upload multiple attachments to the client </title>
<Script language = "javascript" type = "text/javascript">
Function addFile (){
// Create a tr tag
Var tr1 = document. createElement ("tr ");
// Create a td tag
Var td1 = document. createElement ("td ");
// Create an input tag
Var input1 = document. createElement ("input ");
// Add the type = file attribute to input
Input1.setAttribute ("type", "file ");
// Add the value = "Browse" attribute to the input
Input1.setAttribute ("value", "Browse ");
// Append the first created td to tr1
Td1.appendChild (input1 );
Tr1.appendChild (td1 );
// Create a new td
Var td1 = document. createElement ("td ");
// Create an input tag
Var input1 = document. createElement ("input ");
// Add the type = "button" and value = "delete" attributes to the input.
Input1.setAttribute ("type", "button ");
Input1.setAttribute ("value", "delete ");
// Add the nclick event to the input file and pass this to the tag object input. Then, execute the input file to pass the input object.
Input1.setAttribute ("onclick", "delFile (this )");
// Append input to td
Td1.appendChild (input1 );
// Add td to tr1
Tr1.appendChild (td1 );
// Append tr1 to table
Document. getElementById ("id2"). appendChild (tr1 );
}
Function delFile (this1 ){
// This1 accepts the value passed by the onclik event, that is, the input object to be executed
// We want to delete the tr tag, so we can find the parent tag td of input through the input tag.
// Find the parent tag tr of td through td and find the parent tag table of tr. The relation is the parent table of input ~
Var p = this1.parentNode;
Var p2 = p. parentNode;
Var p3 = p2.parentNode;
// Delete the tr tag to which the tag belongs. Save the result of deleting the tag.
Var element = p3.removeChild (p2 );
}
</Script>
</Head>
<Body>
<Div id = "id1">
<Table id = "id2">
<Tr>
<Td> <input type = "file" value = ""> </td>
<Td> <input type = "button" value = "add" onclick = "addFile ()"> </td>
</Tr>
</Table>
</Div>
</Body>
</Html>
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
