作者thinkact (奇想 天を動かす)
看板Ajax
標題[問題] javascript input file的onclick
時間Wed Mar 5 11:40:04 2008
我想做出類似gmail中可以一直增加附檔的功能
目前的做法是用javascript做出新增,移除
再將input file的路徑存在array裡, 之後再處理上傳的部分
但這個方法在firefox 2中可以正常運作,
按下input file的Browse...按鈕後, 會先跳出選檔案的視窗,
之後再執行onclick的addFile function,
所以可以抓到檔案路徑, 並存入array中
但在IE7及firefox 3 beta中,
按下按鈕後, 會先執行onclick指定的function, 之後才跳出選檔案的視窗
所以在addFile function執行時並無法取得檔案路徑
請問有沒有辦法解決這個問題?
(問題描述的有點亂, 附上程式碼如下,
兩個註解起來的alert可以用來檢查file browser跟onclick function哪一個先做)
另外再問一下,
我在用跟gmail相同的方式, 也就是動態新增input file的textfield時,
原本已選好檔案的input file裡的路徑會全部清掉,
請問這種情形應該要怎麼做, 才能做出gmail附檔的效果?
謝謝
#javascript部分:
------------------------------------------------------------------------------
var nFile = 0;
var filePath = new Array();
function addFile() {
//alert("**addFile() START** nFile = " + nFile);
if(document.getElementById("file").value != "") {
nFile++;
filePath[nFile] = document.getElementById("file").value;
showFile();
}
//alert("**add File() END** nFile = " + nFile);
}
function removeFile(n) {
for(i = n; i<nFile; i++) { filePath[i] = filePath[i+1]; }
filePath[nFile--] = null;
showFile();
}
function showFile() {
var obj = document.getElementById("upload");
obj.innerHTML = "";
for(i = 1;i<=nFile; i++) {
obj.innerHTML += "[ " + i + " ] ";
obj.innerHTML += filePath[i];
obj.innerHTML += " <a href=\"javascript:removeFile("
+ i + ");\">remove</a>";
obj.innerHTML += "<br />";
}
obj.innerHTML += "<br />";
obj.innerHTML += "nFile: " + nFile;
}
------------------------------------------------------------------------------
#html部分:
------------------------------------------------------------------------------
<input id="file" onclick="addFile()" type="file" />
<br /><br />
<div id="upload"></div>
------------------------------------------------------------------------------
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 125.225.67.151
1F：推 blackbing:為什麼要存array？POST到server端就會取得了。 03/05 13:35
2F：→ blackbing:你只需要控制顯示幾個input file欄位而已。 03/05 13:36
3F：→ thinkact:因為我在新增input file欄位時, 原有的欄位內容會被清空 03/05 14:57
4F：→ thinkact:所以就先用存在陣列的方式傳送file path 03/05 14:57
5F：推 blackbing:瞭解，那onclick改成onchange試試看吧！ 03/05 22:00
6F：→ thinkact:可以了 謝謝~ 再問一下gmail的附檔選檔案要怎麼做比較好? 03/06 22:11