[javascript] jQuery를 사용하여 <input type = ‘file’/> 지우기

Jquery는 크로스 브라우저 / 이전 브라우저 문제를 처리해야합니다.

이것은 내가 테스트 한 최신 브라우저에서 작동합니다 : Chromium v25, Firefox v20, Opera v12.14

jquery 1.9.1 사용

HTML

<input id="fileopen" type="file" value="" />
<button id="clear">Clear</button>

jquery

$("#clear").click(function () {
    $("#fileopen").val("");
});

에 jsfiddle

다음 자바 스크립트 솔루션은 위의 브라우저에서 저에게 효과적이었습니다.

document.getElementById("clear").addEventListener("click", function () {
    document.getElementById("fileopen").value = "";
}, false);

에 jsfiddle

IE로 테스트 할 방법이 없지만 이론적으로는 작동합니다. MS가 다른 방식으로 수행했기 때문에 IE가 Javascript 버전이 작동하지 않을만큼 충분히 다른 경우 jquery 메소드는 귀하를 대신하여 처리해야합니다. 그렇지 않으면 jquery 팀과 함께 jquery 팀을 지적 할 가치가 있습니다. IE가 요구하는 방법. ( “IE에서는 작동하지 않을 것”이라고 말하는 사람들이 있지만 IE에서 작동하는 방식을 보여주는 바닐라 자바 ​​스크립트 (아마도 “보안 기능”?)는없는 것으로 보입니다. 아마도 MS에게도 버그로보고 할 것입니다. 최신 릴리스에서 수정되도록))

다른 답변에서 언급했듯이 jquery 포럼 의 게시물

 if ($.browser.msie) {
      $('#file').replaceWith($('#file').clone());
 } else {
      $('#file').val('');
 }

그러나 jquery는 이제 브라우저 테스트 jquery.browser에 대한 지원을 제거 했습니다.

이 자바 스크립트 솔루션도 저에게 효과적이었습니다 .jquery.replaceWith 메소드 와 동일한 바닐라 입니다.

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

에 jsfiddle

중요한 점은 cloneNode 메소드가 연관된 이벤트 핸들러를 보존하지 않는다는 것입니다.

이 예를 참조하십시오.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

에 jsfiddle

그러나 jquery.clone 은 이것을 제공합니다 ^{[* 1]}

$("#fileopen").change(function () {
    alert("change");
});

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

에 jsfiddle

^{[* 1]} 그것의 사본 유지로 이벤트가 jQuery의 방법으로 추가 된 경우 JQuery와이 작업을 수행 할 수 jquery.data을 그것은 속임수의 비트, 그래서 그것을, 그렇지 않으면 작동하지 않습니다 / 해결 방법과 수단 일이 아니다 다른 방법이나 라이브러리간에 호환됩니다.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

에 jsfiddle

첨부 된 이벤트 핸들러를 요소 자체에서 직접 가져올 수 없습니다.

여기에 바닐라 자바 ​​스크립트의 일반적인 원칙이 있습니다. 이것은 다른 모든 라이브러리에서 jquery가 수행하는 방식입니다.

(function () {
    var listeners = [];

    function getListeners(node) {
        var length = listeners.length,
            i = 0,
            result = [],
            listener;

        while (i < length) {
            listener = listeners[i];
            if (listener.node === node) {
                result.push(listener);
            }

            i += 1;
        }

        return result;
    }

    function addEventListener(node, type, handler) {
        listeners.push({
            "node": node,
                "type": type,
                "handler": handler
        });

        node.addEventListener(type, handler, false);
    }

    function cloneNode(node, deep, withEvents) {
        var clone = node.cloneNode(deep),
            attached,
            length,
            evt,
            i = 0;

        if (withEvents) {
            attached = getListeners(node);
            if (attached) {
                length = attached.length;
                while (i < length) {
                    evt = attached[i];
                    addEventListener(clone, evt.type, evt.handler);

                    i += 1;
                }
            }
        }

        return clone;
    }

    addEventListener(document.getElementById("fileopen"), "change", function () {
        alert("change");
    });

    addEventListener(document.getElementById("clear"), "click", function () {
        var fileopen = document.getElementById("fileopen"),
            clone = cloneNode(fileopen, true, true);

        fileopen.parentNode.replaceChild(clone, fileopen);
    });
}());

에 jsfiddle

물론 jquery와 다른 라이브러리에는 그러한 목록을 유지하는 데 필요한 다른 모든 지원 방법이 있습니다. 이것은 단지 시연입니다.

답변

function reset_field (e) {
    e.wrap('<form>').parent('form').trigger('reset');
    e.unwrap();
}​

$("#file").replaceWith($("#file").clone());