jQuery를 사용하여 <input type = 'file'/> 지우기

<input type='file' />jQuery 로 제어 값 을 지울 수 있습니까? 나는 다음을 시도했다.

$('#control').attr({ value: '' }); 

그러나 작동하지 않습니다.

쉬움 : <form>요소 를 감싸고 폼에서 reset을 호출 한 다음을 사용하여 폼을 제거합니다 .unwrap(). .clone()이 스레드의 다른 솔루션 과 달리 마지막에는 동일한 요소 (설정된 사용자 정의 속성 포함)로 끝납니다.

Opera, Firefox, Safari, Chrome 및 IE6 +에서 테스트 및 작동 을 제외한 다른 유형의 양식 요소에서도 작동합니다 type="hidden".

window.reset = function(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input id="file" type="file">
  <br>
  <input id="text" type="text" value="Original">
</form>

<button onclick="reset($('#file'))">Reset file</button>
<button onclick="reset($('#text'))">Reset text</button>

JSFiddle

아래의 Timo 메모에서 알 수 있듯이의 내부 필드 재설정을 트리거하는 버튼이있는 경우 제출을 트리거 하지 않도록 이벤트를 <form>호출해야합니다 ..preventDefault()<button>

편집하다

수정되지 않은 버그로 인해 IE 11에서 작동하지 않습니다. 입력시 텍스트 (파일 이름)가 지워지지 만 File목록은 채워져 있습니다.

빠른 답변 : 교체하십시오.

아래 코드에서 replaceWithjQuery 메서드를 사용 하여 컨트롤을 자체 복제본으로 바꿉니다. 이 컨트롤의 이벤트에 바인딩 된 핸들러가있는 경우 해당 핸들러도 보존해야합니다. 이를 위해 메소드 true의 첫 번째 매개 변수로 전달 합니다 clone.

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

var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

피들 : http://jsfiddle.net/jonathansampson/dAQVM/

이벤트 핸들러를 유지하면서 복제하는 경우 이벤트 위임을 사용하여 상위 요소에서이 제어에 대한 클릭을 처리하는 데 고려할 수있는 문제가있는 경우 :

$("form").on("focus", "#control", doStuff);

따라서 컨트롤을 새로 고칠 때 처리기와 요소를 복제 할 필요가 없습니다.

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();
}​

예를 들면 다음과 같습니다. http://jsfiddle.net/v2SZJ/1/

이것은 나를 위해 작동합니다.

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

http://forum.jquery.com/topic/how-to-clear-a-file-input-in-ie

도움이 되길 바랍니다.

IE8에서는 보안을 위해 파일 업로드 필드를 읽기 전용으로 만들었습니다. IE 팀 블로그 게시물을 참조하십시오 .

역사적으로 HTML 파일 업로드 컨트롤 ()은 수많은 정보 유출 취약점의 원인이었습니다. 이러한 문제를 해결하기 위해 컨트롤의 동작이 두 가지로 변경되었습니다.

사용자가 컨트롤에 로컬 파일 경로를 입력하도록 속이는 "스틸 링"키 입력에 의존하는 공격을 차단하기 위해 이제 파일 경로 편집 상자가 읽기 전용입니다. 파일 찾아보기 대화 상자를 사용하여 업로드 할 파일을 명시 적으로 선택해야합니다.

또한 인터넷 영역에 대해 "파일을 업로드 할 때 로컬 디렉토리 경로 포함"URLAction이 "사용 안 함"으로 설정되었습니다. 이 변경은 잠재적으로 민감한 로컬 파일 시스템 정보가 인터넷으로 유출되는 것을 방지합니다. 예를 들어, 전체 경로 C : \ users \ ericlaw \ documents \ secret \ image.png를 제출하지 않고 Internet Explorer 8은 이제 파일 이름 image.png 만 제출합니다.

$("#control").val('')당신이 필요한 전부입니다! JQuery 1.11을 사용하여 Chrome에서 테스트

다른 사용자도 Firefox에서 테스트했습니다.

나는 여기에 모든 옵션이 붙어 있습니다. 내가 만든 해킹은 다음과 같습니다.

<form>
 <input type="file">
 <button type="reset" id="file_reset" style="display:none">
</form>

다음과 유사한 코드로 jQuery를 사용하여 재설정을 트리거 할 수 있습니다.

$('#file_reset').trigger('click');

(jsfiddle : http://jsfiddle.net/eCbd6/ )

나는 이것으로 끝났다.

if($.browser.msie || $.browser.webkit){
  // doesn't work with opera and FF
  $(this).after($(this).clone(true)).remove();  
}else{
  this.setAttribute('type', 'text');
  this.setAttribute('type', 'file'); 
}

가장 우아한 해결책은 아니지만 내가 알 수있는 한 작동합니다.

https://github.com/malsup/form/blob/master/jquery.form.js 를 사용 했습니다.이 기능 clearInputs()은 크로스 브라우저, 테스트가 쉽고 사용하기 쉽고 IE 문제 및 숨겨진 필드 지우기 필요한 경우. 파일 입력 만 지우는 약간 긴 솔루션 일 수 있지만 크로스 브라우저 파일 업로드를 처리하는 경우이 솔루션을 사용하는 것이 좋습니다.

사용법은 쉽습니다 :

// 모든 파일 필드를 지 웁니다.
$ ( "input : file"). clearInputs ();

// 숨겨진 필드도 지 웁니다.
$ ( "input : file"). clearInputs (true);

// 특정 필드를 지 웁니다.
$ ( "# myfilefield1, # ​​myfilefield2"). clearInputs ();

/ **
 * 선택한 양식 요소를 지 웁니다.
 * /
$ .fn.clearFields = $ .fn.clearInputs = function (includeHidden) {
    var re = / ^ (?: color | date | datetime | email | month | number | password | range | search | tel | text | time | url | week) $ / i; // 'hidden'이이 목록에 없습니다
    이것을 돌려줍니다 .each (function () {
        var t = this.type, tag = this.tagName.toLowerCase ();
        if (re.test (t) || tag == 'textarea') {
            this.value = '';
        }
        그렇지 않으면 (t == 'checkbox'|| t == 'radio') {
            this.checked = 거짓;
        }
        그렇지 않으면 (tag == 'select') {
            this.selectedIndex = -1;
        }
        그렇지 않으면 (t == "file") {
            if (/MSIE/.test(navigator.userAgent)) {
                $ (this) .replaceWith ($ (this) .clone (true));
            } else {
                $ (this) .val ( '');
            }
        }
        else if (includeHidden) {
            // includeHidden은 true 값이거나 선택자 문자열 일 수 있습니다.
            // 특별한 테스트를 나타냅니다. 예를 들면 다음과 같습니다.
            // $ ( '# myForm'). clearForm ( '. special : hidden')
            // 위의 내용은 'special'클래스가있는 숨겨진 입력을 정리합니다.
            if ((includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string'&& $ (this) .is (includeHidden)))
                this.value = '';
        }
    });
};

파일 입력 값은 읽기 전용입니다 (보안상의 이유로). 해당 필드보다 넓은 범위를 갖는 폼의 reset () 메서드를 호출하는 것 외에는 프로그래밍 방식으로 비워 둘 수 없습니다.

다음 코드로 작업 할 수있었습니다.

var input = $("#control");    
input.replaceWith(input.val('').clone(true));

HTML 파일 입력을 지우는 간단하고 깨끗한 방법을 찾고 있었지만 위의 답변은 훌륭하지만 웹에서 간단하고 우아한 방법으로 나올 때까지는 아무도 내가 원하는 것을 대답하지 않습니다.

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

모든 크레딧은 Chris Coyier 에게갑니다 .

// Referneces
var control = $("#control"),
    clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
    change: function(){ console.log( "Changed" ) },
     focus: function(){ console.log(  "Focus"  ) }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>

.clone()것은 않습니다 하지 오페라 (및 기타) 작동합니다. 내용을 유지합니다.

나에게 가장 가까운 방법은 Jonathan의 초기 방법이지만 필자의 경우 필드가 지저분한 코드를 위해 만들어진 이름, 클래스 등을 보존했습니다.

이와 같은 것이 잘 작동 할 수 있습니다 (Quentin에게도 감사드립니다).

function clearInput($source) {
    var $form = $('<form>')
    var $targ = $source.clone().appendTo($form)
    $form[0].reset()
    $source.replaceWith($targ)
}

다음을 사용 하여이 작업을 수행했습니다 ...

function resetFileElement(ele) 
{
    ele.val(''); 
    ele.wrap('<form>').parent('form').trigger('reset');   
    ele.unwrap();
    ele.prop('files')[0] = null;
    ele.replaceWith(ele.clone());    
}

이것은 IE10, FF, Chrome & Opera에서 테스트되었습니다.

두 가지 경고가 있습니다 ...

1. FF에서 여전히 제대로 작동하지 않습니다. 페이지를 새로 고치면 파일 요소가 선택한 파일로 다시 채워집니다. 이 정보를 얻는 곳은 저 너머입니다. 파일 입력 요소와 관련하여 무엇을 지우려고 할 수 있습니까?

2. 파일 입력 요소에 첨부 한 모든 이벤트에 대해 위임을 사용해야하므로 복제가 수행 될 때 여전히 작동합니다.

내가 이해할 수없는 것은 지구상의 사용자가 허용 할 수없는 잘못된 파일 선택에서 입력 필드를 지우지 못하게하는 것이 좋은 생각이라고 생각합니다.

좋아, 동적으로 값을 설정하여 사용자의 OS에서 파일을 침출 할 수는 없지만 전체 양식을 재설정하지 않고 유효하지 않은 선택을 지우도록하겠습니다.

'수락'은 어쨌든 필터 이외의 다른 일을하는 것과 같지 않으며 IE10에서는 MS Word 마임 유형을 이해하지 못하기 때문에 농담입니다!

내 Firefox 40.0.3에서만이 작업을 수행

 $('input[type=file]').val('');
 $('input[type=file]').replaceWith($('input[type=file]').clone(true));

모든 브라우저에서 저에게 효과적입니다.

        var input = $(this);
        var next = this.nextSibling;
        var parent = input.parent();
        var form = $("<form></form>");
        form.append(input);
        form[0].reset();
        if (next) {
            $(next).before(input);
        } else {
            parent.append(input);
        }

사용자가 언급 한 대부분의 기술로 시도했지만 모든 브라우저에서 작동하지는 않았습니다. 즉, 파일 입력의 경우 FF에서 clone ()이 작동하지 않습니다. 파일 입력을 수동으로 복사 한 다음 원본을 복사 한 것으로 바꿨습니다. 모든 브라우저에서 작동합니다.

<input type="file" id="fileID" class="aClass" name="aName"/>

var $fileInput=$("#fileID");
var $fileCopy=$("<input type='file' class='"+$fileInput.attr("class")+" id='fileID' name='"+$fileInput.attr("name")+"'/>");
$fileInput.replaceWith($fileCopy);

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"</div>");
$("#fileWrapper").html($("#duplicateFile").html());

Chrome, FF 및 Safari에서 작동합니다.

$("#control").val("")

IE 또는 Opera에서 작동하지 않을 수 있습니다

비동기식으로 만들고 버튼의 원하는 작업이 완료된 후 재설정하십시오.

    <!-- Html Markup --->
    <input id="btn" type="file" value="Button" onchange="function()" />

    <script>
    //Function
    function function(e) {

        //input your coding here           

        //Reset
        var controlInput = $("#btn");
        controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
    } 
    </script>

function clear() {
    var input = document.createElement("input");
    input.setAttribute('type', 'file');
    input.setAttribute('value', '');
    input.setAttribute('id', 'email_attach');

    $('#email_attach').replaceWith( input.cloneNode() );
}

그것은 나를 위해 작동하지 않습니다 :

$('#Attachment').replaceWith($(this).clone());
or 
$('#Attachment').replaceWith($('#Attachment').clone());

그래서 asp mvc에서는 파일 입력을 대체하기 위해 면도기 기능을 사용합니다. 먼저 Id와 Name을 사용하여 입력 문자열에 대한 변수를 만든 다음 페이지에 표시하고 재설정 버튼을 클릭하여 바꾸십시오.

@{
    var attachmentInput = Html.TextBoxFor(c => c.Attachment, new { type = "file" });
}

@attachmentInput

<button type="button" onclick="$('#@(Html.IdFor(p => p.Attachment))').replaceWith('@(attachmentInput)');">--</button>

쉬운 방법은 입력 유형을 변경하고 다시 변경하는 것입니다.

이 같은:

var input = $('#attachments');
input.prop('type', 'text');
input.prop('type', 'file')

이렇게 복제본으로 바꿀 수 있습니다

var clone = $('#control').clone();

$('#control').replacewith(clone);

하지만이 값도 복제해서

var emtyValue = $('#control').val('');
var clone = emptyValue.clone();

$('#control').replacewith(clone);

쉬운 롤입니다 (오페라를 제외한 모든 브라우저에서 작동) :

$('input[type=file]').each(function(){
    $(this).after($(this).clone(true)).remove();
});

JS 피들 : http://jsfiddle.net/cw84x/1/

뭐? 유효성 검사 기능에서

document.onlyform.upload.value="";

업로드가 이름이라고 가정합니다.

<input type="file" name="upload" id="csv_doc"/>

JSP를 사용하고 있습니다. 차이가 있는지 확실하지 않습니다 ...

저에게 효과적이며 더 쉽다고 생각합니다.