input file 動態更改 value 的問題

samp_011.gif

今早在測試 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碼重新產生一次。

嗯,果然是安全與方便難兩全啊~

One thought on “input file 動態更改 value 的問題

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s