Question

我想重置特定输入文件中的值

如果我有这样的结构代码，怎么办呢....

<div id="row_btnbar1" class="buttonbar">
    <div>
        <div class="gallery">
            <output id="show_img1"></output>
        </div>
        <div class="button">
            <input type="file" id="files1" name="files[]"/>
            <button id="reset1" type="reset" class="reset">
                <span>Reset</span>
            </button>
            <span class="process"></span>
        </div>
    </div>
</div>

<div id="row_btnbar2" class="buttonbar">
    // #files2, #reset2
</div>
<div id="row_btnbar3" class="buttonbar">
    // #files3, #reset3 
</div>
<div id="row_btnbar4" class="buttonbar">
    // #files4, #reset4
</div>

Answer 1

无法通过常规方式清除HTML文件输入（即将值设置为null或空字符串），但由于浏览器安全限制，大多数浏览器不允许这样做。在许多浏览器中，设置空值属性将不起作用或导致错误。相反，创建一个克隆旧元素并交换两个元素的新元素。

阅读：How to clear HTML file inputs

技巧： - 您必须创建新的输入类型文件并将其替换为旧文件。

<强> JS

function clearFileInput() {
    var oldInput = document.getElementById("files1");
    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);
}

fiddle Demo

<小时/> 在OP的评论

之后更新

Updated fiddle Demo

$(document).ready(function () {
    function clearFileInput(el) {
        var oldInput = document.getElementById(el);
        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);
    }
    $('.reset').click(function () {
        clearFileInput($(this).prev('input[type="file"]').attr('id'));
    });
});

jQuery - 如何重置特定字段值

1 个答案: