0

I'm going to develop a firefox extension which adds a button beside the file input fields (the <input type="file">tag) when a file is selected.

包含扩展逻辑的文件 overlay.js 通过以下方法管理“文件选择”事件：

var xpitest = {
    ...
    onFileChosen: function(e) {
        var fileInput = e.explicitOriginalTarget;
        if(fileInput.type=="file"){
            var parentDiv = fileInput.parentNode;
            var newButton = top.window.content.document.createElement("input");
            newButton.setAttribute("type", "button");
            newButton.setAttribute("id", "Firefox.Now_button_id");
            newButton.setAttribute("value", "my button");
            newButton.setAttribute("name", "Firefox.Now_button_name");
            parentDiv.insertBefore(newButton, fileInput);
        }
    }
    ...
}

window.addEventListener("change", function(e) {xpitest.onFileChosen(e)},false);

我的问题是，每次我选择一个文件时，都会添加一个新按钮，请看这张图：

http://img11.imageshack.us/img11/5844/sshotn.png

如果我多次选择同一个文件，则不会出现新按钮（这是正确的）。

正如我们所见，在第一个文件输入时，只选择了一个文件。

在第二个中，我选择了两个不同的文件，实际上已经创建了两个按钮......

第三，我选择了三个不同的文件。

正确的行为应该是这样的：

  • 选择文件后，在输入字段旁边创建 my_button
  • 如果 my_button 存在，删除它并创建另一个（我需要这个，因为我应该将它连接到一个自定义事件，该事件将对文件名执行某些操作）

我的问题是：如何正确删除按钮？请注意，my_button html 代码不会出现在页面源代码中！

谢谢

4

2 回答 2

0

如果我想得太简单了，请原谅我，但你不能这样做吗？

var button = document.getElementById('Firefox.Now_button_id')
button.parentNode.removeChild(button)

这是你要找的吗？如果我误解了你，请随时纠正我。

于 2009-05-11T08:54:18.453 回答
0

解决了。我使用以下方法为每个设置了一个 ID：

onPageLoad: function(e){
    var inputNodes = top.window.content.document.getElementsByTagName("input");       
    for(var i=0; i<inputNodes.length; i++){
    if(inputNodes[i].type=="file")
         inputNodes[i].setAttribute("id",i.toString());
    } 
}

我只在页面加载时调用此方法：

var appcontent = document.getElementById("appcontent");   // browser
if(appcontent)
    appcontent.addEventListener("DOMContentLoaded", xpitest.onPageLoad, true);

然后我以这种方式修改了 onFileChosen 方法：

onFileChosen: function(e) {
    var fileInput = e.explicitOriginalTarget;
    if(fileInput.type=="file"){
        var parentDiv = fileInput.parentNode;         
        var buttonId = fileInput.id + "Firefox.Now_button_id";
        var oldButton = top.window.content.document.getElementById(buttonId);
        if(oldButton!=null){
            parentDiv.removeChild(oldButton);
            this.count--;
        }
        var newButton = top.window.content.document.createElement("input");
        newButton.setAttribute("type", "button");      
        newButton.setAttribute("id", buttonId);
        newButton.setAttribute("value", "my button");
        newButton.setAttribute("name", "Firefox.Now_button_name");
        parentDiv.insertBefore(newButton, fileInput);
        this.count++;
    }
}
于 2009-05-11T10:25:25.903 回答