<입력 유형 =“파일”>을 재설정하는 방법

VS2012 및 Javascript로 메트로 앱을 개발 중입니다.

파일 입력 내용을 재설정하고 싶습니다 :

<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />

어떻게해야합니까?

주석에 @ dhaval-marthak이 게시 한 jQuery 솔루션은 분명히 작동하지만 실제 jQuery 호출을 보면 jQuery가 수행중인 작업을 쉽게 볼 수 value있습니다. 속성을 빈 문자열로 설정하면 됩니다. 따라서 "순수한"JavaScript에서는 다음과 같습니다.

document.getElementById("uploadCaptureInputFile").value = "";

당신은 포장 필요 <input type = “file”>에 <form>태그와 당신은 당신의 양식을 재설정하여 입력을 재설정 할 수 있습니다 :

onClick="this.form.reset()"

이것이 가장 좋은 해결책입니다.

input.value = ''

if(!/safari/i.test(navigator.userAgent)){
  input.type = ''
  input.type = 'file'
}

여기에있는 모든 대답 중 가장 빠른 해결책입니다. 입력 복제본 없음, 양식 재설정 없음!

모든 브라우저에서 확인했습니다 (IE8도 지원합니다).

다음과 같은 경우 :

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

그런 다음 그냥하십시오 :

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

파일 컨트롤을 재설정합니다.

모든 이벤트가 여전히 첨부 된 상태에서 복제하여 자체로 교체 할 수 있습니다.

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

과

var input = $("#control");

function something_happens() {
    input.replaceWith(input.val('').clone(true));
};

감사합니다 : Css-tricks.com

다른 솔루션 (HTML DOM 요소를 선택하지 않고)

해당 입력에 'change'이벤트 리스너를 추가 한 경우 Javascript 코드에서 (일부 지정된 조건에 대해) 호출 할 수 있습니다.

event.target.value = '';

예를 들어 HTML에서 :

<input type="file" onChange="onChangeFunction(event)">

그리고 자바 스크립트에서 :

onChangeFunction(event) {
  let fileList = event.target.files;
  let file = fileList[0];
  let extension = file.name.match(/(?<=\.)\w+$/g)[0].toLowerCase(); // assuming that this file has any extension

  if (extension === 'jpg') {
    alert('Good file extension!');
  }
  else {
    event.target.value = '';
    alert('Wrong file extension! File input is cleared.');
  }

해결책

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

var $el = $('#uploadCaptureInputFile');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

데모

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

연결

자세한 내용 은 JavaScript 로 파일 입력을 재설정하는 방법을 참조하십시오 .

순수한 JavaScript를 사용하여 파일 업로드 버튼을 재설정하는 것은 매우 쉽습니다. !

몇 가지 방법이 있지만 많은 브라우저에서 잘 작동하는 간단한 방법은 파일 값을 아무것도 변경하지 않고 파일 업로드가 재설정되는 방식이며 프레임 워크 대신 순수한 자바 스크립트를 사용하려고합니다. 아래 코드를 확인하십시오 (ES6).

function resetFile() {
  const file = document.querySelector('.file');
  file.value = '';
}

<input type="file" class="file" />
<button onclick="resetFile()">Reset file</button>

특히 Angular의 경우

document.getElementById('uploadFile').value = "";

작동하지만 Angular를 사용하면 "HTMLElement'.any 유형에"Property 'Property'가 없습니다 "라고 표시됩니다.

document.getElementById ()는 값 속성이 포함되지 않은 HTMLElement 유형을 반환합니다. 따라서 HTMLInputElement로 캐스트하십시오.

(<HTMLInputElement>document.getElementById('uploadFile')).value = "";

엑스트라 :-

그러나 DOM 조작 (document.xyz ())을 각도로 사용해서는 안됩니다.

이를 위해 각도는 각각 document.querySelector (), document.queryselectorAll () 인 @VIewChild, @ViewChildren 등을 제공했습니다.

나는 그것을 읽지 못했습니다. 전문가의 블로그를 따르는 것이 좋습니다

이를 통해 이동 링크 1 , 링크 2

나는 vuejs에 사용

   <input
          type="file"
          ref="fileref"
          @change="onChange"/>

this.$refs.fileref.value = ''

재설정 입력 파일이 매우 단일

$('input[type=file]').val(null);

바인드하면 양식의 다른 필드를 변경하여 파일을 재설정하거나 양식을 ajax로로드하십시오.

이 예는 적용 가능합니다

예를 들어 선택기$('input[type=text]') 는 양식의 모든 요소입니다.

이벤트 click , change또는 어떤 경우

$('body').delegate('event', 'selector', function(){
     $('input[type=file]').val(null) ;
});

IE 10을 사용 하여 다음과 같은 문제를 해결했습니다.

    var file = document.getElementById("file-input");
    file.removeAttribute('value');
    file.parentNode.replaceChild(file.cloneNode(true),file);

어디 :

<input accept="image/*" onchange="angular.element(this).scope().uploadFile(this)" id="file-input" type="file"/>

많은 접근 방식이 있으며 입력에 참조 첨부 파일을 사용하는 것이 좋습니다.

<input
    id="image"
    type="file"
    required
    ref={ref => this.fileInput = ref}
    multiple
    onChange={this.onFileChangeHandler}
/>

제출 후 가치를 지우십시오.

this.fileInput.value = "";

그냥 사용하십시오 :

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

각도를 사용하면 템플릿 변수를 만들고 값을 null

<input type="file" #fileUploader />
<button (click)="fileUploader.value = null">Reset from UI</button>

또는 이와 같이 재설정하는 방법을 만들 수 있습니다

component.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

  resetFileUploader() { 
    this.fileUploader.nativeElement.value = null;
  }

주형

<input type="file"/>
<button (click)="resetFileUploader()">Reset from Component</button>

stackblitz 데모

읽기 전용 파일이므로 재설정 할 수 없습니다. 문제를 해결하기 위해 복제 할 수 있습니다.

이것을 시도해야합니다 :

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

이처럼 할 수 있습니다

var inputfile= $('#uploadCaptureInputFile')
$('#reset').on('click',function(){
inputfile.replaceWith(inputfile.val('').clone(true));
})

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

<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
<a href="" id="reset">Reset</a>

내 최고의 솔루션

$(".file_uplaod_input").val('');  // this is working best ):

jQuery 솔루션 :

    $('input').on('change',function(){
                $(this).get(0).value = '';
                $(this).get(0).type = '';
                $(this).get(0).type = 'file';
            });

각도에 대한 ng2-file-upload 문제에 직면했습니다. 각도로 솔루션을 찾고 있다면 아래 코드를 참조하십시오

HTML :

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

구성 요소

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

@ViewChild('activeFrameinputFile ')InputFrameVariable: ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) => {

`this.`**InputFrameVariable**`.nativeElement.value = '';`

};

<input type="file" id="mfile" name="mfile">
<p>Reset</p>

<script>
$(document).ready(function(){
$("p").click(function(){

            $("#mfile").val('');
            return false;

    });
});

양식에 여러 파일이 있지만 그 중 하나만 재설정하려는 경우 :

boostrap, jquery, filestyle을 사용하여 입력 파일 양식을 표시하는 경우 :

$("#"+idInput).filestyle('clear');

var fileInput = $('#uploadCaptureInputFile');
fileInput.replaceWith(fileInput.val('').clone(true));

동적 컨트롤에서도 작동합니다.

자바 스크립트

<input type="file" onchange="FileValidate(this)" />

function FileValidate(object) {
    if ((object.files[0].size / 1024 / 1024) > 1) {   //greater than 1 MB         
        $(object).val('');
    }     
}

JQuery

<input type="file" class="UpoloadFileSize">

$(document).ready(function () {

    $('.UpoloadFileSize').bind('change', function () {                
        if ((this.files[0].size / 1024000) > 1.5) { //greater than 1.5 MB
            $(this).val('');
            alert('Size exceeded !!');
        }
    });

});