Question

我有一个文件类型输入按钮，如果用户选择我需要完全清除，我找到的唯一安全解决方案是完全破坏输入并重建它。我现在拥有的是什么，但它是一个＆＃34; Harp Gun＆＃34;解决方案，它只能工作一次。

基本上，用户有这样的文件输入：

<input type="file" name="filesToUpload" id="filesToUpload" onChange="makeFileList();" />
<ul id="fileList"><li>No Files Selected</li></ul>

当他们选择一个文件时，他们可能需要完全清除它。

所以我通过将其附加到文件列表来构建它：

 function makeFileList() {
    var input = document.getElementById("filesToUpload");
    var ul = document.getElementById("fileList");
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
    for (var i = 0; i < input.files.length; i++) {
        var li = document.createElement("li");
        var fileSize = input.files[i].size;
        li.innerHTML = input.files[i].name +"&nbsp;"+ "<span id=\"lblSize\"></span><input onclick=\"clearFileInput()\" type=\"button\" value=\"Clear\" \/>";
        ul.appendChild(li);
    }
    if(!ul.hasChildNodes()) {
        var li = document.createElement("li");
        li.innerHTML = 'No Files Selected';
        ul.appendChild(li);
    }
};

要完全销毁文件，该函数会重建输入，如下所示：

 function clearFileInput(){
    var oldInput = document.getElementById("filesToUpload");
    var newInput = document.createElement("input");
    newInput.type = "file";
    newInput.id = oldInput.id;
    newInput.name = oldInput.name;
    newInput.className = oldInput.className;
    newInput.style.cssText = oldInput.style.cssText;
    // copy any other relevant attributes
    oldInput.parentNode.replaceChild(newInput, oldInput);
};

所以我可以创建元素，添加文件类型，并使用旧的输入ID，类和名称。但我需要它具有相同的onChange =＆＃34; makeFileList（）;行为也是如此。

这是FIDDLE。任何帮助表示赞赏。

Answer 1

只需添加属性。

function clearFileInput(){
    var oldInput = document.getElementById("filesToUpload");
    var newInput = document.createElement("input");
    newInput.type = "file";
    newInput.id = oldInput.id;
    newInput.name = oldInput.name;
    newInput.className = oldInput.className;
    newInput.style.cssText = oldInput.style.cssText;
    newInput.setAttribute("onclick", "makeFileList()");     
    // copy any other relevant attributes
    oldInput.parentNode.replaceChild(newInput, oldInput);
};

Answer 2

这个怎么样：

function clearFileInput(){
    var oldInput = document.getElementById("filesToUpload"),
        newInput = document.createElement("input"),
        eventHandler = oldInput.onchange;
    newInput.type = "file";
    newInput.id = oldInput.id;
    newInput.name = oldInput.name;
    newInput.className = oldInput.className;
    newInput.style.cssText = oldInput.style.cssText;
    // copy any other relevant attributes
    oldInput.parentNode.replaceChild(newInput, oldInput);
    newInput.onclick = eventHandler ;
};

Answer 3

由于您已将其标记为jquery，因此您可以使用事件委派。

$(document).on('change', '[name="filesToUpload"]', makeFileList);

将onClick添加到由JavaScript构建的输入

3 个答案: