关于HTML FILE文件上传控件

在做项目时，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碼重新產生一次。

嗯，果然是安全與方便難兩全啊～

评论

1 楼 fiolvivi 2008-12-17  

两行都写上的话IE7下file控件就消失了