JavaScript를 통해 HTML 파일 업로드 필드 지우기

JavaScript를 통해 HTML 파일 업로드 필드 지우기

---

사용자가 다른 옵션을 선택할 때 파일 업로드 필드를 재설정하고 싶습니다.

JavaScript를 통해 가능합니까? 파일 업로드 요소가 사용자의 파일 시스템과 상호 작용하기 때문에 다르게 처리되고 변경 불가능할 수 있다고 생각합니다.

기본적으로 내가 원하는 것은 (의사 코드)와 같습니다.

// Choose selecting existing file
$('#select-file').bind('focus', function() {
  // Clear any files currently selected in #upload-file
  $('#upload-file').val(''); 
}) ;

// Choose uploading new one - this works ok
$('#upload-file').bind('focus', function() {
  // Clear any files currently selected in #select-file
  $('#select-file').val(''); 
}) ;

---

대부분의 브라우저에서는 입력 값을 설정할 수 없지만 새 요소를 만들고 이전 요소의 속성을 복사 한 다음 둘을 교체 할 수 있습니다.

다음과 같은 양식이 주어집니다.

<form> 
    <input id="fileInput" name="fileInput" type="file" /> 
</form>

직접적인 DOM 방식 :

function clearFileInput(id) 
{ 
    var oldInput = document.getElementById(id); 

    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; 
    // TODO: copy any other relevant attributes 

    oldInput.parentNode.replaceChild(newInput, oldInput); 
}

clearFileInput("fileInput");

간단한 DOM 방식. 파일 입력을 좋아하지 않는 이전 브라우저에서는 작동하지 않을 수 있습니다.

oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput);

jQuery 방식 :

$("#fileInput").replaceWith($("#fileInput").val('').clone(true));

// .val('') required for FF compatibility as per @nmit026

jQuery를 통해 전체 양식 재설정 : https://stackoverflow.com/a/13351234/1091947

---

이제 2014 년에 ID가있는 입력 요소가 함수를 지원합니다 val('').

입력의 경우-

<input type="file" multiple="true" id="File1" name="choose-file" />

이 js는 입력 요소를 지 웁니다.

$("#File1").val('');

---

예, 업로드 요소는 다른 브라우저에서 직접 조작되지 않도록 보호됩니다. 그러나 DOM 트리에서 요소를 지운 다음 JavaScript를 통해 그 자리에 새 요소를 삽입 할 수 있습니다. 그것은 당신에게 동일한 결과를 줄 것입니다.

라인을 따라 뭔가 :

$('#container-element').html('<input id="upload-file" type="file"/>');

---

내가 사용한 코드는

clearReviewFileSel: function() {
  var oldInput = document.getElementById('edit-file-upload-review-pdf') ;
  var newInput = document.createElement('input');
  newInput.id    = oldInput.id ;
  newInput.type  = oldInput.type ;
  newInput.name  = oldInput.name ;
  newInput.size  = oldInput.size ;
  newInput.class  = oldInput.class ;
  oldInput.parentNode.replaceChild(newInput, oldInput); 
}

제안과 조언에 감사드립니다!

---

포커스 이벤트를받지 않으므로 다음과 같은 트릭을 사용해야합니다.이를 지우는 유일한 방법은 전체 양식을 지우는 것입니다.

<script type="text/javascript">
    $(function() {
        $("#wrapper").bind("mouseover", function() {
            $("form").get(0).reset();
        });
    });
</script>

<form>
<div id="wrapper">
    <input type=file value="" />
</div>
</form>

---

정말 이렇게 간단하게 유지하는 것을 좋아합니다 :)

$('input[type=file]').wrap('<form></form>').parent().trigger('reset').children().unwrap('<form></form>');

---

간단한 솔루션 :

document.getElementById("upload-files").value = "";

---

version다음과 같이 완벽하게 작동하는 짧습니다 .

document.querySelector('#fileUpload').value = "";

---

이 jQuery는 IE11, Chrome 53 및 Firefox 49에서 저에게 효과적이었습니다.

cloned = $("#fileInput").clone(true);
cloned.val("");
$("#fileInput").replaceWith(cloned);

---

잘 해봐

document.getElementById('fileUpload').parentNode.innerHTML = document.getElementById('fileUpload').parentNode.innerHTML;

---

For compatibility when ajax is not available, set .val('') or it will resend the last ajax-uploaded file that is still present in the input. The following should properly clear the input whilst retaining .on() events:

var input = $("input[type='file']");
input.html(input.html()).val('');

---

Try this code...

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

---

jQuery tested method working fine in FF & Chrome:

$(function(){
    $.clearUploadField = function(idsel){
        $('#your-id input[name="'+idsel+'"]').val("") 
    }
});

---

If you have the following:

<input type="file" id="FileSelect">

then just do:

$("#FileSelect").val('');

to reset or clear last selected file.

---

I know the FormData api is not so friendly for older browsers and such, but in many cases you are anyways using it (and hopefully testing for support) so this will work fine!

function clearFile(form) {
  // make a copy of your form
  var formData = new FormData(form);
  // reset the form temporarily, your copy is safe!
  form.reset();
  for (var pair of formData.entries()) {
    // if it's not the file, 
    if (pair[0] != "uploadNameAttributeFromForm") {
      // refill form value
      form[pair[0]].value = pair[1];
    }
    
  }
  // make new copy for AJAX submission if you into that...
  formData = new FormData(form);
}

---

I faced the issue with ng2-file-upload for angular. if you are looking for the solution on angular by ng2-file-upload, refer below code

HTML:

<input type="file" name="myfile" #activeFrameinputFile ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

component

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@ViewChild('activeFrameinputFile')InputFrameVariable: ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) => { this.InputFrameVariable.nativeElement.value = ''; };

참고URL : https://stackoverflow.com/questions/829571/clearing-an-html-file-upload-field-via-javascript