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

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

---

사용자가 파일을 선택할 때 이벤트를 발생시키고 싶습니다. .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를 게시하여이 작업을 수행했습니다. 이를 통해 사용자는 동일한 파일을 연속으로 두 번 선택하고 서버에 게시 할 변경 이벤트가 발생하도록 할 수 있습니다. 내 예제는 jQuery 양식 플러그인을 사용합니다 .

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

---

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 = ''
}

---

이것은 나를위한 일

<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)날 구해 줬어 :-)

---

기본적으로 입력 요소의 값 속성은 입력에 여러 속성이있는 경우 파일을 선택한 후 지워집니다. 이 속성을 정리하지 않으면 동일한 파일을 선택하면 "변경"이벤트가 발생하지 않습니다. 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
});

---

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;경고 후 추가해야 합니다.

---

Probably the easiest thing you can do is set the value to an empty string. This forces it to 'change' the file each time even if the same file is selected again.

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

---

You can use form.reset() to clear the file input's files list. This will reset all fields to default values, but in many cases you may be only using the input type='file' in a form to upload files anyway. In this solution there is no need to clone the element and re-hook events again.

Thanks to philiplehmann

---

I ran into same issue, i red through he solutions above but they did not get any good explanation what was really happening.

This solution i wrote https://jsfiddle.net/r2wjp6u8/ does no do many changes in the DOM tree, it just changes values of the input field. From performance aspect it should be bit better.

Link to fiddle: 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>

---

So, there is no way to 100% be sure they are selecting the same file unless you store each file and compare them programmatically.

The way you interact with files (what JS does when the user 'uploads' a file) is HTML5 File API and 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

These tutorials show you how to capture and read the metadata (stored as js object) when a file is uploaded.

Create a function that fires 'onChange' that will read->store->compare metadata of the current file against the previous files. Then you can trigger your event when the desired file is selected.

---

Believe me, it will definitely help you!

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

Hope this will help many of you guys.

---

Create for the input a click event and a change event. The click event empties the input and the change event contains the code you want to execute.

So the click event will empty when you click the input button(before the select file windows opens), therefor the change event will always trigger when you select a file.

$("#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>

참고URL : https://stackoverflow.com/questions/4109276/how-to-detect-input-type-file-change-for-the-same-file