JavaScript로 HTML 파일 입력을 지우려면 어떻게해야합니까?

양식에서 파일 입력을 지우고 싶습니다.

소스를 동일한 방법으로 설정하는 방법에 대해 알고 있지만 ...이 방법으로 선택한 파일 경로를 지우지 않습니다.

참고 : 페이지를 다시로드하거나 양식을 재설정하거나 AJAX 호출을 수행하지 않으려 고합니다.

이게 가능해?

해당 노드를 제거하고 동일한 이름으로 새 노드를 작성하는 것은 어떻습니까?

자바 스크립트로 파일 입력을 지우는 방법에는 3 가지가 있습니다.

1. 값 특성을 비어 있거나 널로 설정하십시오.

   IE11 + 및 기타 최신 브라우저에서 작동합니다.

2. 새 파일 입력 요소를 작성하고 이전 파일 입력 요소를 바꾸십시오.

   단점은 이벤트 리스너와 expando 속성이 손실된다는 것입니다.

3. form.reset () 메소드를 통해 소유자 양식을 재설정하십시오.

   동일한 소유자 양식의 다른 입력 요소에 영향을주지 않기 위해 비어있는 새 양식을 작성하고 파일 입력 요소를이 새 양식에 추가하고 재설정 할 수 있습니다. 이 방법은 모든 브라우저에서 작동합니다.

자바 스크립트 함수를 작성했습니다. 데모 : http://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){ }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

tl; dr : 최신 브라우저의 경우

input.value = '';

오래된 답변 :

어때요?

input.type = "text";
input.type = "file";

왜 이것이 웹킷에서 작동 하지 않는지 이해해야 합니다.

어쨌든 이것은 IE9>, Firefox 및 Opera에서 작동합니다.
웹킷의 상황은 파일로 다시 변경할 수없는 것 같습니다.
IE8에서는 보안 예외가 발생합니다.

편집 : 웹 키트, Opera 및 firefox의 경우 다음과 같이 작동합니다.

input.value = '';

(이 제안으로 위의 답변을 확인하십시오)

GC 없이도이 크로스 브라우저를 수행하는 더 깔끔한 방법을 찾을 수 있는지 살펴 보겠습니다.

편집 2 :

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

대부분의 브라우저에서 작동합니다. IE <9에서는 작동하지 않습니다.
파이어 폭스 20, 크롬 24, 오페라 12, IE7, IE8, IE9 및 IE10에서 테스트되었습니다.

값을로 설정하면 ''모든 브라우저에서 작동하지는 않습니다.

대신 값을 다음 null과 같이 설정하십시오 .

document.getElementById('your_input_id').value= null;

편집 : JS가 파일 입력을 설정하지 못하게하는 매우 유효한 보안상의 이유가 있지만 이미 선택된 출력 을 지우는 간단한 메커니즘을 제공하는 것이 합리적 입니다. 빈 문자열을 사용해 보았지만 모든 브라우저에서 작동하지 않고 NULL시도한 모든 브라우저 (Opera, Chrome, FF, IE11 + 및 Safari)에서 작동했습니다.

편집 : NULL빈 문자열로 설정하는 동안 모든 브라우저 에서 작동 하도록 설정 하지 않았습니다.

불행히도 위의 답변 중 어느 것도 모든 기초를 다루는 것으로 보이지 않습니다. 적어도 바닐라 자바 ​​스크립트로 테스트하지 않았습니다.

• .value = null파이어 폭스, 쵸메, 오페라와 IE11에 작업에 나타납니다 (하지만 하지 IE8 / 10분의 9)

• .cloneNode.clone()FireFox에서 (및 jQuery에서) .value오버 를 복사하는 것처럼 보이 므로 복제본이 무의미합니다.

FireFox (27 및 28), Chrome (33), IE (8, 9, 10, 11), Opera (17)에서 작동하는 바닐라 자바 ​​스크립트 기능은 다음과 같습니다. 이것은 현재 사용 가능한 유일한 브라우저입니다 테스트 할 나에게.

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

ctrl기능은 다음과 같이 호출 할 수 있도록 매개 변수는 파일 입력 자체가 ...

clearFileInput(document.getElementById("myFileInput"));

해결책

다음 코드는 jQuery와 함께 작동했습니다. 모든 브라우저에서 작동하며 이벤트 및 사용자 정의 특성을 보존 할 수 있습니다.

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

데모

코드 및 데모는 이 jsFiddle 을 참조하십시오 .

연결

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

• JavaScript로 파일 입력을 재설정하는 방법

새로운 파일 입력으로 교체해야합니다. 다음은 jQuery로 수행 할 수있는 방법입니다.

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

입력 필드를 지워야 할 때이 줄을 사용하십시오 (예를 들어 어떤 경우에) :

inputFile.parent().html( inputFile.parent().html() );

document.getElementById('your_input_id').value=''

편집 :
이것은 IE와 오페라에서 작동하지 않지만 파이어 폭스, 사파리 및 크롬에서는 작동하는 것 같습니다.

나는 똑같은 문제가 있었고 이것을 생각해 냈습니다.

var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';

document.querySelector('button').onclick = function(){
  file.files = emptyFile.files;
}

<input type='file'>
<button>clear</button>

실제로는 매우 쉽습니다.

document.querySelector('#input-field').value = '';

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>

위의 답변은 다음과 같은 이유로 다소 서투른 솔루션을 제공합니다.

1. 내가하지에있는 같이 할 먼저 다음 HTML을 받고, 매우 복잡하고 지저분합니다.wrapinput

2. 크로스 브라우저 JS 편리이며이 경우에는 안정적으로 사용하기에 너무 많은 미지수가있는 것 같다 type(다시, 비트 더러운 인) 스위칭 및 설정 value에가''

그래서 jQuery 기반 솔루션을 제공합니다.

$('#myinput').replaceWith($('#myinput').clone())

그것은 입력을 자체 복제본으로 대체합니다. 클론은 파일을 선택하지 않습니다.

장점 :

1. 간단하고 이해하기 쉬운 코드
2. 서투른 랩핑 또는 타입 전환 없음
3. 크로스 브라우저 호환성 (여기서 내가 틀렸다면 수정)

결과 : 행복한 프로그래머

여기 내 2 센트가 있습니다. 입력 파일은 배열로 저장되므로 여기에 null을 지정하는 방법이 있습니다

document.getElementById('selector').value = []

이것은 빈 배열을 반환하고 모든 브라우저에서 작동합니다

내가 도움이 된 것은 큐를 지우지 않고 루프를 사용하여 마지막으로 선택한 파일을 가져 와서 업로드하려고 시도한 것입니다. 코드는 다음과 같습니다.

for (int i = 0; i <= Request.Files.Count-1; i++)
{
 HttpPostedFileBase uploadfile = files[i];
 Stream fs = uploadfile.InputStream;
 BinaryReader br = new BinaryReader(fs);
 Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}

이것이 도움이되기를 바랍니다.

나는 대부분의 솔루션을 시도했지만 아무도 일하는 것처럼 보이지 않았습니다. 그러나 나는 아래에서 그것을 둘러 보았습니다.

폼의 구조는 : form=> label, input및 submit button. 파일을 선택하면 JavaScript에서 수동으로 파일 이름이 레이블에 표시됩니다.

그래서 내 전략은 : 처음에는 제출 button이 비활성화되어 파일을 선택한 후 제출 버튼 disabled속성이 제거되어 파일을 제출할 수 있습니다. 제출 한 후에 label는 파일을 지우는 것처럼 input보이지만 실제로는 보이지 않습니다. 그런 다음 양식을 제출하지 못하도록 제출 버튼을 다시 비활성화합니다.

제출 button disable여부 를 설정하면 다른 파일을 선택하지 않으면 파일이 여러 번 제출되지 않습니다.

setAttribute를 사용하여 텍스트를 입력하고 파일로 다시 입력하도록 변경했습니다.

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}