복붙노트

[JQUERY] 용지 <input 타입 = '파일'/> jQuery를 사용

JQUERY

용지 jQuery를 사용

해결법

  1. 1.쉬운 : 당신이 다음 양식 사용 .unwrap를 제거하는 <형식> 주변 요소, 양식에 전화 리셋을 래핑 (). .clone 달리 () 솔루션 그렇지 않으면이 스레드에서, 당신은 (그것을 설정 한 사용자 지정 속성 포함) 끝에 같은 요소와 끝까지.

    쉬운 : 당신이 다음 양식 사용 .unwrap를 제거하는 <형식> 주변 요소, 양식에 전화 리셋을 래핑 (). .clone 달리 () 솔루션 그렇지 않으면이 스레드에서, 당신은 (그것을 설정 한 사용자 지정 속성 포함) 끝에 같은 요소와 끝까지.

    테스트와 오페라, 파이어 폭스, 사파리, 크롬과 IE6 +에서 작업. 또한 = "숨겨진"타입을 제외하고, 폼 요소의 다른 유형에서 작동합니다.

    window.reset = 함수 (E) { e.wrap ( '

    ')에 가장 가까운 ( '형태')하세요 (0) .reset ()..; e.unwrap (); } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <입력 ID = "파일"TYPE = "파일"> 로
    <입력 ID = "텍스트"유형 = "텍스트"값 = "원본"> <버튼의 onclick = "리셋 ($ ( '# 파일'))"> 재설정 파일 <버튼의 onclick = "리셋 ($ ( '# 텍스트'))"> 재설정 텍스트

    JSFiddle

    당신이 <형식>의 현장 내부의 리셋을 트리거 할 수있는 버튼이있는 경우 아래 티모 노트로서, 당신은 제출 트리거에서 <버튼>을 방지하기 위해 이벤트 .preventDefault ()를 호출해야합니다.

    때문에 고정되지 않은 버그가 IE 11에서 작동하지 않습니다. 텍스트 (파일 이름) 입력에 삭제하지만 파일 목록 남아 채워집니다.

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

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

    코드에서 나는 자체의 복제와 컨트롤을 대체 할 replaceWith의 jQuery 방법을 사용하여 아래. 경우에는이 컨트롤의 이벤트에 바인딩 어떤 핸들러를 가지고, 우리는뿐만 아니라 사람들을 보존 할 수 있습니다. 우리는 복제 방법의 첫 번째 매개 변수로 사실 전달이 작업을 수행합니다.

    <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);

    컨트롤이 갱신 될 때이 방지는 어떤 핸들러에 대한 필요성은 요소와 함께 복제 할 수 있습니다.

  3. 3.JQuery와는 당신을 위해 크로스 브라우저 / 오래된 브라우저 문제 돌볼 예정이다.

    JQuery와는 당신을 위해 크로스 브라우저 / 오래된 브라우저 문제 돌볼 예정이다.

    이것은 내가 테스트하는 것이 최신 브라우저에서 작동 : 크롬 V25, 파이어 폭스 V20, 오페라 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로 테스트 할 방법이 없지만, 이론적으로이 작업을해야합니다. IE는 MS가 당신을 위해 내 의견 거래에 JQuery와 방법을해야, 다른 방법으로 일을했기 때문에 자바 스크립트 버전이 다른 사람이 가치와 함께 JQuery와 팀에 지적 될 것이다 작동하지 않는 다른 부족 인 경우 IE가 요구하는 방법. (I는 "IE에서이하지 않습니다 일을"말하는 사람들을 볼 수 있지만 바닐라 자바 ​​스크립트는 가정에 "보안 기능"(IE에 대한 작업을 수행하는 방법을 보여줍니다 없습니다?), 아마도 너무 MS에 버그로보고 (IF 그들은 것 )가 어떤 새로운 릴리스에서 수정됩니다 그래서,) 등을 계산

    등이 다른 답변에서 JQuery와 포럼에 게시물을 언급

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

    하지만 지금은 브라우저 테스트, jquery.browser에 대한 지원을 제거한 JQuery와.

    또한 나를 위해 일한이 자바 스크립트 솔루션, 그것은 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에

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

    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와 및 기타 라이브러리 등의 목록을 유지하기 위해 필요한 모든 다른 지원 방법이 중에서, 이것은 단지 데모입니다.

  4. 4.확실한 보안을 위해 당신은 빈 문자열로, 파일 입력의 값을 설정할 수 없습니다.

    확실한 보안을 위해 당신은 빈 문자열로, 파일 입력의 값을 설정할 수 없습니다.

    당신이 할 일은 당신은 단지 다른 분야를 포함하는 형태의 파일 입력을 재설정하려면 필드 또는이를 사용하는 경우 양식을 재설정 할 수 있습니다 :

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

    다음은 그 예이다 : http://jsfiddle.net/v2SZJ/1/

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

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

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

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

    희망이 도움이.

  6. 6.IE8에서 그들은 업로드 필드는 읽기 전용 보안을 위해 파일을했다. IE의 팀 블로그 게시물을 참조 :

    IE8에서 그들은 업로드 필드는 읽기 전용 보안을 위해 파일을했다. IE의 팀 블로그 게시물을 참조 :

  7. 7.$ ( "# 제어"). 발 ( '') 당신이 필요로하는 모든입니다! 크롬 JQuery와 1.11 사용에 대한 테스트

    $ ( "# 제어"). 발 ( '') 당신이 필요로하는 모든입니다! 크롬 JQuery와 1.11 사용에 대한 테스트

    다른 사용자는 물론 파이어 폭스에서 테스트했습니다.

  8. 8.나는 여기에 옵션을 모두와 함께 붙어있어. 여기에 내가 일을하는 제작하는 해킹입니다 :

    나는 여기에 옵션을 모두와 함께 붙어있어. 여기에 내가 일을하는 제작하는 해킹입니다 :

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

    당신이 유사한 코드를 jQuery를 사용하여 리셋을 트리거 할 수 있습니다 :

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

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

  9. 9.나는이 함께 결국 :

    나는이 함께 결국 :

    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'); 
}

    가장 우아한 해결책이 될 수 있지만, 지금까지 내가 말할 수있는 작동하지 않을 수 있습니다.

  10. 10.나는 crossbrowser, 잘 테스트 인, 쉽게 사용할 수 있으며 핸들 IE의 문제와 함수라는 clearInputs ()를 가지고있는, https://github.com/malsup/form/blob/master/jquery.form.js을 사용했다 숨겨진 필드가 필요 청소해도. 당신이 crossbrowser 파일 업로드를 처리하는 경우 어쩌면에만 클리어 파일 입력에 약간 긴 솔루션은, 그러나,이 솔루션은 좋습니다.

    나는 crossbrowser, 잘 테스트 인, 쉽게 사용할 수 있으며 핸들 IE의 문제와 함수라는 clearInputs ()를 가지고있는, https://github.com/malsup/form/blob/master/jquery.form.js을 사용했다 숨겨진 필드가 필요 청소해도. 당신이 crossbrowser 파일 업로드를 처리하는 경우 어쩌면에만 클리어 파일 입력에 약간 긴 솔루션은, 그러나,이 솔루션은 좋습니다.

    사용법은 간단합니다 :

    // Clear all file fields:
$("input:file").clearInputs();

// Clear also hidden fields:
$("input:file").clearInputs(true);

// Clear specific fields:
$("#myfilefield1,#myfilefield2").clearInputs();

    /**
 * Clears the selected form elements.
 */
$.fn.clearFields = $.fn.clearInputs = function(includeHidden) {
    var re = /^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i; // 'hidden' is not in this list
    return this.each(function() {
        var t = this.type, tag = this.tagName.toLowerCase();
        if (re.test(t) || tag == 'textarea') {
            this.value = '';
        }
        else if (t == 'checkbox' || t == 'radio') {
            this.checked = false;
        }
        else if (tag == 'select') {
            this.selectedIndex = -1;
        }
        else if (t == "file") {
            if (/MSIE/.test(navigator.userAgent)) {
                $(this).replaceWith($(this).clone(true));
            } else {
                $(this).val('');
            }
        }
        else if (includeHidden) {
            // includeHidden can be the value true, or it can be a selector string
            // indicating a special test; for example:
            //  $('#myForm').clearForm('.special:hidden')
            // the above would clean hidden inputs that have the class of 'special'
            if ( (includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $(this).is(includeHidden)) )
                this.value = '';
        }
    });
};

  11. 11.파일 입력의 값은 (보안상의 이유로) 읽기 전용입니다. 당신은 (그냥 필드보다 더 넓은 범위를 가지고있는 형태의 reset () 메소드를 호출하여 이외의) 프로그래밍 방식으로 그것을 빈 수 없습니다.

    파일 입력의 값은 (보안상의 이유로) 읽기 전용입니다. 당신은 (그냥 필드보다 더 넓은 범위를 가지고있는 형태의 reset () 메소드를 호출하여 이외의) 프로그래밍 방식으로 그것을 빈 수 없습니다.

  12. 12.나는 나의 다음 코드를 사용하여 작업을 얻을 수 있었다 :

    나는 나의 다음 코드를 사용하여 작업을 얻을 수 있었다 :

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

  13. 13.나는 분명 HTML 파일 입력에 간단하고 깨끗한 방법을 찾고있다, 위의 답변은 중대하다,하지만 그들 중 누구도 정말 간단하게 할 수있는 우아한 방법으로 웹에 걸쳐 올 때까지 내가 무엇을 찾고 있어요 응답하지 :

    나는 분명 HTML 파일 입력에 간단하고 깨끗한 방법을 찾고있다, 위의 답변은 중대하다,하지만 그들 중 누구도 정말 간단하게 할 수있는 우아한 방법으로 웹에 걸쳐 올 때까지 내가 무엇을 찾고 있어요 응답하지 :

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

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

    모든 신용 크리스 Coyier로 이동합니다.

    // Referneces VAR 제어 = $ ( "# 제어") clearBn = $ ( "# 분명"); 맑은 기능 // 설정 clearBn.on ({) (함수를 "클릭" control.replaceWith (control.val ( '') 클론) (참.); }); // 일부 바운드 핸들러는 경우 복제 보존 control.on ({ 변경 : 함수 () {CONSOLE.LOG ( "변경")}, 초점 : 함수 () {을 console.log ( "포커스")} }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 로
    로
    지우기 에

  14. 14..clone () 점은 오페라 (및 기타)에서 작동하지 않습니다. 이 콘텐츠를 유지합니다.

    .clone () 점은 오페라 (및 기타)에서 작동하지 않습니다. 이 콘텐츠를 유지합니다.

    여기에 나를 위해 가장 가까운 방법은 그러나 필드 내 경우에는 지저분한 코드를 만든 등 이름, 클래스, 보존을 보장, 조나단의 이전이었다.

    이 힘 작업도 비슷해 (너무 쿠엔틴 덕분에) :

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

  15. 15.나는이 다음을 사용하여 작동하도록 관리해야 ...

    나는이 다음을 사용하여 작동하도록 관리해야 ...

    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, 크롬 및 오페라에서 테스트되었습니다.

    두 가지주의 사항이 있습니다 ...

    지구에 사람 좋은 생각은 잘못된 받아 들일 수없는 파일 선택에서 입력 필드 선택을 취소 한 허용하지 무슨 생각을 이해하지 않는 것은?

    OK, I는 사용자의 OS에서 파일을 거를 수 있도록 저를 동적으로 값을 설정할 수 있지만, 나에게 전체 양식을 재설정하지 않고 잘못된 선택을 취소 할 수 없습니다.

    그것은 같은 '동의', 심지어 MS 워드 유형을 마임 이해하지 못하는 어쨌든 필터보다 및 IE10에서 다른 아무것도하지 않습니다, 그것은 농담입니다!

  16. 16.이 내 파이어 폭스 40.0.3에만 작업에

    이 내 파이어 폭스 40.0.3에만 작업에

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

  17. 17.그 모든 브라우저에서 나를 위해 작동합니다.

    그 모든 브라우저에서 나를 위해 작동합니다.

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

  18. 18.나는 사용자가 언급 한 기술의 대부분하려하지만 아무도 모든 브라우저에서 작동하지 않습니다. 즉 : 클론 ()하지 않습니다 파일 입력에 대한 FF에서 작동합니다. 나는 수동으로 파일 입력을 복사 한 다음 복사 한 원래 교체 끝났다. 그것은 모든 브라우저에서 작동합니다.

    나는 사용자가 언급 한 기술의 대부분하려하지만 아무도 모든 브라우저에서 작동하지 않습니다. 즉 : 클론 ()하지 않습니다 파일 입력에 대한 FF에서 작동합니다. 나는 수동으로 파일 입력을 복사 한 다음 복사 한 원래 교체 끝났다. 그것은 모든 브라우저에서 작동합니다.

    <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);

  19. 19.

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

  20. 20.크롬, FF, 사파리와이 작품

    크롬, FF, 사파리와이 작품

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

    IE 나 오페라 작동하지 않을 수 있습니다

  21. 21.이 비동기 확인하고 버튼의 원하는 작업을 완료 한 후에 다시 설정할.

    이 비동기 확인하고 버튼의 원하는 작업을 완료 한 후에 다시 설정할.

        <!-- 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>

  22. 22.

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

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

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

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

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

    그래서 ASP MVC 내가 사용 면도기에 파일 입력을 교체하기위한 있습니다. 처음에는 ID와 이름으로 입력 문자열 변수를 만든 다음 페이지에 표시 및 리셋 버튼 클릭에 교체를 위해 그것을 사용 :

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

@attachmentInput

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

  24. 24.쉬운 방법은 입력 유형을 변경하고 다시 변경된다.

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

    이 같은:

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

  25. 25.당신은 너무 같은 자사의 복제로 교체 할 수 있습니다

    당신은 너무 같은 자사의 복제로 교체 할 수 있습니다

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

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

    그러나 그 값이 클론이 너무 그래서 당신과 같이 더 나은했다

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

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

  26. 26.그것은 쉬운 롤 ([오페라 제외] 모든 브라우저에서 작동)입니다 :

    그것은 쉬운 롤 ([오페라 제외] 모든 브라우저에서 작동)입니다 :

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

    JS 바이올린 : http://jsfiddle.net/cw84x/1/

  27. 27.뭐? 유효성 검사 기능에 바로 넣어

    뭐? 유효성 검사 기능에 바로 넣어

    document.onlyform.upload.value="";

    업로드를 가정하면 이름입니다 :

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

    나는 확실하지 그 차이를 만드는 경우, JSP를 사용하고 있습니다 ...

    나를위한 작품, 나는 그것의 방법을 쉽게 생각합니다.

    28. from https://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 jQuery를에 로딩 스피너를 보여?  (0) 2020.09.24
[JQUERY] (CORS) 게시 요청 가공 크로스 원산지 자원 공유를 얻는 방법  (0) 2020.09.24
[JQUERY] jQuery를 선택 정규 표현식  (0) 2020.09.24
[JQUERY] 아약스 튜토리얼 게시물에 대한 얻을 [마감]  (0) 2020.09.24
[JQUERY] 어떻게 jQuery를 사용하여 JSF 구성 요소를 선택?  (0) 2020.09.24
,

티스토리툴바