mutiples upload ทำงานบน firefox แต่ไม่ทำงานบน ie

มีคำถามผ่านมาทาง MSN ผมเห็นว่าน่าสนใจดี ก็เลยเอามาตอบบนบอร์ดแทน เพราะเห็นว่าเป็นกรณีศึกษาได้ดีทีเดียว

น้องเขาอธิบายว่า โค้ดด้านล่างนี้ เป็น mutiples upload ถ้าทดสอบบน firefox ก็ทำงานปกติดี แต่พอมาทดสอบบน IE กลับไม่สามารถอัปโหลดได้

<script type="text/javascript">

    function addUpload() {

        var container = document.getElementById('myUploadContainer');

        var num = document.getElementById('total');

        var newNum = (num.value-1)+2;

        num.value = newNum;

        var uploadDiv = document.createElement('div');

        var anotherBox = document.createElement('input');

        var boxName = 'uploadBox_'+newNum;

        anotherBox.setAttribute("type","file");

        anotherBox.setAttribute("name",boxName);

        uploadDiv.setAttribute("id",boxName);

        uploadDiv.appendChild(anotherBox);

        uploadDiv.innerHTML = uploadDiv.innerHTML+" <a href='#' onclick='removeField(\""+boxName+"\");'>[เอาออก]</a>";

        container.appendChild(uploadDiv);

    }

    function removeField(fieldID){

        var container = document.getElementById('myUploadContainer');

        container.removeChild(document.getElementById(fieldID));

    }

</script>

    

<form action="up.php" method="post" enctype="multipart/form-data" name="frm_test">

<input type="hidden" name="boxes" value="0" id="total" />

<div id="myUploadContainer"> </div>

<p><a href="javascript:;" onclick="addUpload();">แนบไฟล์</a></p>

<div><input type='submit' value="Upload" /></div>

</form>

ถ้าจะตรวจสอบโค้ดกันละเอียดจริงๆ แล้ว ก็พบว่าไม่มีข้อผิดพลาดอะไร การ debug ด้วย firefox ก็ปกติดีทุกอย่าง (ก็มันทำงานได้บน firefox นี่เนาะ) หลังจากพิจารณาอยู่เป็นนาน 2 นาน ก็ถึงได้ถึงบางอ้อ

ปัญหาของ IE ก็คือ Javascript มันค่อนข้าง เพี้ยนๆ จาก Browser มาตรฐานอยู่เสมอ ทำให้เราต้องมาคอยออกแบบ script สำหรับ IE แยกต่างหากจาก Browser อื่นๆ

คำตอบของปํญหานี้เกิดที่บรรทัดสีแดงด้านบนครับ เนื่องจาก ใน IE การสร้าง element ต้องทำให้ถูก step ไม่สามารถใส่กันง่ายๆด้วย innerHTML ได้ ยกตัวอย่าง ตาราง ต้องสร้างใน tbody ในกรณีนี้ก็เช่นกัน เราไม่สามารถใส่ tag A ลงไป ด้วย innerHTML ได้

การแก้ไขก็ง่ายนิดเดียวครับ แค่สร้าง element A ด้วย creatElement เท่านั้น

<script type="text/javascript">

    function addUpload() {

        var container = document.getElementById('myUploadContainer');

        var num = document.getElementById('total');

        var newNum = (num.value-1)+2;

        num.value = newNum;

        var uploadDiv = document.createElement('div');

        var anotherBox = document.createElement('input');

        var boxName = 'uploadBox_'+newNum;

        anotherBox.setAttribute("type","file");

        anotherBox.setAttribute("name",boxName);

        uploadDiv.setAttribute("id",boxName);

        a = document.createElement('a');

        a.href = 'javascript:removeField("' + boxName + '")';

        a.innerHTML = '[ลบ]';

        uploadDiv.appendChild(anotherBox);

        uploadDiv.appendChild(a);

        container.appendChild(uploadDiv);

    }

    function removeField(fieldID){

        var container = document.getElementById('myUploadContainer');

        container.removeChild(document.getElementById(fieldID));

    }

</script>