การรีเซ็ตค่าใน file input

file input ไม่สามารถกำหนดค่าได้โดยตรง เนื่องจากเหตุผลด้านความปลอดภัย จากสาเหตุดังกล่าวทำให้เราไม่สามารถที่จะรีเซ็ตค่าที่อยู่ใน file input ได้เหมือนกับ input ประเภทอื่นๆ แต่ถึงกระนั้นเทคนิคที่จะสามารถทำให้เรารีเซ็ตค่าของ file input นั้นสามารถทำได้คือ ลบ file input ที่มีค่าออกไปแล้ววาดอันใหม่ทับลงไป

ตัวอย่างเช่น

ให้เราสร้าง file input ซ้อนไว้ภายใต้แท็กอะไรก็ได้เพื่อที่จะใช้ id ของแท็กที่ครอบอยู่นั้นเป็นตัวอ้างอิง ในการลบหรือวาด file input

โค้ด HTML
<div id="TestReset">
      <input type="file" id="fileInput" name="fileInput" />
</div>

<a onclick="ResetFileInput('TestReset')" href="javascript:noAction();">
Clear
</a>

ในส่วนของ JavaScript นั้นจะเข้าถึงแท็กที่ครอบ file input นั้นไว้ แล้วจะเอาโค้ดที่อยู่ภายในแท็กนั้นมากำหนดให้กับที่เดิม (ภายในของแท็กที่ครอบ file input ซึ่งก็คือแท็ก file input นั่นเอง)

โค้ด JavaScript
<script>
function ResetFileInput(ContainerId) 
{
    document.getElementById(ContainerId).innerHTML = document.getElementById(ContainerId).innerHTML;
}
</script>

ที่มา : http://gusiev.com/2009/04/clear-upload-file-input-field/