在做项目时,Javascript 取消圖片效果時發現的一個<input type=”file”>無法動態改變value的怪問題,程式大致如下:
<script>
function reset(){
obj = document.getElementById(’upload_img’);
obj.value = ”;
}
</script>
<form>
<input type=”file” name=”upload_img” id=”upload_img” value=”瀏覽”>
<input type=”botton” onclick=”reset()”>
</form>
這段程式碼的目的只有一個,就是希望當按下取消圖片的時候,它可以把圖片回歸到預設的無圖片效果,並自動把使用者瀏覽輸入框當中的檔案路徑給清掉,變成空白。
奇怪的是,明明alert( obj.value)會出現值,但是卻無法成功的將 obj.value 指定為空值,起碼 IE 與 Opera 不能正常運作,這真的是讓我心中感到頗鳥的,可是開另外一個檔案測試,打簡單的程式碼來debug,又發現可以正常運作,ㄚ是在衝啥小啦~
找了很久,下面這是解決的方法:
<script>
function reset(){
obj = document.getElementById(’upload_img’);
obj.value = ”; // 這行是留給FF用的,因為下面這一行FF不鳥( This is for FireFox )
obj.outerHTML = ‘<input type=”file” name=”upload_img” id=”upload_img” value=”瀏覽”>’; // 給IE等其他瀏覽器
}
</script>
至於為什麼會產生這樣的問題,其實是因為基於安全考量,所以檔案上傳物件的值被設定成唯讀,因此無法透過Javascript來更改 input file的值,所以如果真的想要製造這種清空的效果,就只能選擇用outerHTML的方式再把html碼重新產生一次。
嗯,果然是安全與方便難兩全啊~