동일한 파일에 대한 입력 유형 = 파일 "변경"을 감지하는 방법은 무엇입니까?

사용자가 파일을 선택할 때 이벤트를 시작하고 싶습니다. .change이벤트 와 함께하면 사용자가 매번 파일을 변경하면 작동합니다.

그러나 사용자가 동일한 파일을 다시 선택하면 이벤트를 시작하고 싶습니다.

1. 사용자 선택 파일 A.jpg(이벤트 발생)
2. 사용자 선택 파일 B.jpg(이벤트 발생)
3. 사용자 선택 파일 B.jpg(이벤트가 발생하지 않습니다. 실행하고 싶습니다)

내가 어떻게 해?

속일 수 있습니다. 파일 요소를 제거하고 change이벤트시 동일한 위치에 추가하십시오 . 파일 경로가 지워져 매번 변경할 수 있습니다.

jsFiddle의 예.

또는 간단히 사용할 수 있습니다 . jsFiddle에서이 예제를.prop("value", "") 참조하십시오 .

• jQuery 1.6 이상 prop
• 이전 버전 attr

당신이 시도 .attr("value", "")하고 작동하지 않은 경우 , 내가 당황하지 마십시오

그냥 .val("")대신하고 잘 작동합니다.

사용자가 컨트롤을 클릭 할 때마다 파일 경로 를 null로 설정하기 만하면됩니다 . 이제 사용자가 동일한 파일을 선택하더라도 onchange 이벤트가 트리거됩니다.

<input id="file" onchange="file_changed(this)" onclick="this.value=null;" type="file" accept="*/*" />

사용자가 필드를 클릭 할 때마다 onClick 이벤트를 사용하여 대상 입력 값을 지 웁니다. 이를 통해 onChange 이벤트가 동일한 파일에 대해서도 트리거되도록합니다. 나를 위해 일했다 :)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

TypeScript 사용

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

파일 입력 값 onClick을 지우고 onChange 파일을 게시 하여이 작업을 수행했습니다. 이를 통해 사용자는 동일한 파일을 한 번에 두 번 선택할 수 있으며 변경 이벤트가 서버에 게시되도록 할 수 있습니다. 내 예제는 jQuery 양식 플러그인을 사용합니다 .

$('input[type=file]').click(function(){
    $(this).attr("value", "");
})  
$('input[type=file]').change(function(){
    $('#my-form').ajaxSubmit(options);      
})

이것은 나를 위해 작동

<input type="file" onchange="function();this.value=null;return false;">

VueJs 솔루션

<input
                type="file"
                style="display: none;"
                ref="fileInput"
                accept="*"
                @change="onFilePicked"
                @click="$refs.fileInput.value=null"
>

@ braitsch에서 영감을 받아 AngularJS2에서 다음을 사용했습니다. input-file-component

<input id="file" onclick="onClick($event) onchange="onChange($event)" type="file" accept="*/*" />

export class InputFile {

    @Input()
    file:File|Blob;

    @Output()
    fileChange = new EventEmitter();

    onClick(event) {
        event.target.value=''
    }
    onChange(e){
        let files  = e.target.files;
        if(files.length){
            this.file = files[0];
        }
        else { this.file = null}
        this.fileChange.emit(this.file);
    }
}

여기 onClick(event)구출 나를 :-)

아마도 가장 쉬운 방법은 값을 빈 문자열로 설정하는 것입니다. 동일한 파일을 다시 선택하더라도 매번 파일을 '변경'합니다.

<input type="file" value="" />

내가 찾은 반응식 솔루션은 다음과 같습니다.

onClick={event => event.target.value = null}

jQuery를 사용하지 않으려는 경우

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

Firefox에서는 잘 작동하지만 Chrome의 경우 this.value=null;경고 후 추가해야 합니다.

입력에 여러 속성이있는 경우 파일을 선택한 후 입력 요소의 값 특성이 기본적으로 지워집니다. 이 속성을 정리하지 않으면 동일한 파일을 선택하면 "change"이벤트가 시작되지 않습니다. multiple속성을 사용하여이 동작을 관리 할 수 ​​있습니다 .

<!-- will be cleared -->
<input type="file" onchange="yourFunction()" multiple/>
<!-- won't be cleared -->
<input type="file" onchange="yourFunction()"/>

참고

change여기에서 불을 피울 수 없습니다 (아무것도 변경 되지 않았으므로 올바른 동작). 그러나, 당신은 또한 바인딩 할 수 click있습니다 ... 이것은 너무 자주 발사 될 수 있습니다 ...하지만 둘 사이에는 중간 정도가 많지 않습니다.

$("#fileID").bind("click change", function() {
  //do stuff
});

클릭 이벤트 및 변경 이벤트를 입력하십시오. click 이벤트는 입력을 비우고 change 이벤트는 실행하려는 코드를 포함합니다.

따라서 입력 버튼을 클릭하면 (파일 선택 창이 열리기 전에) 클릭 이벤트가 비워 지므로 파일을 선택할 때 변경 이벤트가 항상 트리거됩니다.

$("#input").click(function() {
  $("#input").val("")
});

$("#input").change(function() {
  //Your code you want to execute!
});

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

form.reset()파일 입력 files목록 을 지우는 데 사용할 수 있습니다 . 이렇게하면 모든 필드가 기본값으로 재설정되지만, 대부분의 경우 입력 형식 = '파일'형식 만 사용하여 파일을 업로드 할 수 있습니다. 이 솔루션에서는 요소를 복제하고 이벤트를 다시 후크 할 필요가 없습니다.

philiplehmann 덕분에

나는 같은 문제가 발생하여 위의 솔루션을 통해 빨간색을 보였지만 실제로 무슨 일이 일어나고 있는지에 대한 좋은 설명을 얻지 못했습니다.

이 솔루션은 https://jsfiddle.net/r2wjp6u8/을 작성했습니다. 했으며 DOM 트리에서 많은 변경을 수행하지 않고 입력 필드의 값만 변경합니다. 성능 측면에서 조금 나아질 것입니다.

바이올린 링크 : https://jsfiddle.net/r2wjp6u8/

<button id="btnSelectFile">Upload</button>

<!-- Not displaying the Inputfield because the design changes on each browser -->
<input type="file" id="fileInput" style="display: none;">
<p>
  Current File: <span id="currentFile"></span>
</p>
<hr>
<div class="log"></div>


<script>
// Get Logging Element
var log = document.querySelector('.log');

// Load the file input element.
var inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', currentFile);

// Add Click behavior to button
document.getElementById('btnSelectFile').addEventListener('click', selectFile);

function selectFile() {
  if (inputElement.files[0]) {
    // Check how manyf iles are selected and display filename
    log.innerHTML += '<p>Total files: ' + inputElement.files.length + '</p>'
    // Reset the Input Field
    log.innerHTML += '<p>Removing file: ' + inputElement.files[0].name + '</p>'
    inputElement.value = '';
    // Check how manyf iles are selected and display filename
    log.innerHTML += '<p>Total files: ' + inputElement.files.length + '</p>'
    log.innerHTML += '<hr>'
  }

  // Once we have a clean slide, open fiel select dialog.
  inputElement.click();
};

function currentFile() {
    // If Input Element has a file
  if (inputElement.files[0]) {
    document.getElementById('currentFile').innerHTML = inputElement.files[0].name;
  }
}

</scrip>

따라서 각 파일을 저장하고 프로그래밍 방식으로 비교하지 않으면 100 %가 동일한 파일을 선택하고 있는지 확인할 수 없습니다.

파일과 상호 작용하는 방법 (사용자가 파일을 '업로드'할 때 JS가하는 것 )은 HTML5 File API 및 JS FileReader 입니다.

https://www.html5rocks.com/en/tutorials/file/dndfiles/

https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser

이 학습서에서는 파일을 업로드 할 때 메타 데이터 (js 오브젝트로 저장된)를 캡처하고 읽는 방법을 보여줍니다.

'onChange'를 실행하여 현재 파일의 메타 데이터를 이전 파일과 비교하는 읽기-> 저장-> 기능을 생성하십시오. 그런 다음 원하는 파일을 선택하면 이벤트를 트리거 할 수 있습니다.

저를 믿으십시오, 그것은 당신을 확실히 도울 것입니다!

// there I have called two `onchange event functions` due to some different scenario processing.

<input type="file" class="selectImagesHandlerDialog" 
    name="selectImagesHandlerDialog" 
    onclick="this.value=null;" accept="image/x-png,image/gif,image/jpeg" multiple 
    onchange="delegateMultipleFilesSelectionAndOpen(event); disposeMultipleFilesSelections(this);" />


// delegating multiple files select and open
var delegateMultipleFilesSelectionAndOpen = function (evt) {

  if (!evt.target.files) return;

  var selectedPhotos = evt.target.files;
  // some continuous source

};


// explicitly removing file input value memory cache
var disposeMultipleFilesSelections = function () {
  this.val = null;
};

이것이 많은 사람들에게 도움이되기를 바랍니다.