Það er svo langt síðan ég hef sett inn kóða hérna að ég var að skella þessu inn. Þetta er nú ekki merkilegt en sýnir hvað hægt er að gera með DOM á síðum.
Það sem ég er að gera í nýja auglýsingakerfinu er að leyfa fólki að senda inn margar myndir í einu, hinsvegar vil ég bara birta eitt file input box þegar síðan hleðst. Notandinn getur svo smellt á takka til að bæta við file input boxum. Að sjálfsögðu er algjörlega bannað að endurhlaða síðuna.
Þetta er html kóðinn. Einfaldur.
<html>
<head>
<title>hallo</title>
</head>
<body>
<div id="fileInputs">
<input type="file" name="image_1" />
</div>
<input type="button" onclick="addFileInput();" value="Bæta við takka" />
</body>
</html>
Næst er að búa til javascript aðgerðina sem bætir við tökkum á síðuna. Html er hægt að skilgreina sem margir hlutir sem líta svona út <nafn hlutur="gildi"></nafn> öllum þessum hlutum er skellt inní svokallað DOM sem er hægt að segja að sé xml tré. Þannig að ef við lítum á þessa einföldu html síðu í DOM-inu lítur þetta svona út
html
|
|- head
| |
| |- title {hallo}
|
|- body
|
|- div[id="fileInputs"]
| |
| |- input[type=file, name=image_1]
|
|- input[type="button", onclick="addFileInput();", value="Bæta við takka"]
Það sem við þurfum að gera er að bæta við fleiri input[type=file, name=image] fyrir neðan div-ið. Þá lítur javascript kóðin svona út
var nextImageCount = 2; //byrjum í tveimur því eitt input var þegar á staðnum.
function addFileInput() {
var input = document.createElement('input');
input.type = 'file';
//nafnið og hækkum teljarann eftir að nafnið hefur verið sett
input.name = 'image_' + nextImageCount++;
//finnum nú div-ið sem inniheldur öll file input-inn
var div = document.getElementById('fileInputs');
div.appendChild(input); //bætum nú nýja file input-inu við div-ið og þá er það búið.
}
DOM er semsagt nokkuð sniðugt tæki og skemmtilegt að nota, sérstaklega þegar það er nýtt á réttan hátt