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

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

사용자가 파일을 선택할 때 이벤트를 발생시키고 싶습니다. 수행여하로 하기.change사용자가 매번 파일을 변경하면 작동합니다.

하지만 사용자가 같은 파일을 다시 선택하면 이벤트를 시작하고 싶습니다.

1. 사용자 선택 파일A.jpg 화재 (이벤트 화재)
2. 사용자 선택 파일B.jpg 화재 (이벤트 화재)
3. 사용자 선택 파일B.jpg(이벤트가 시작되지 않습니다, 저는 이벤트가 시작되기를 원합니다)

어떻게 해야 하나요?

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

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

속일 수 있습니다.한 후 파일요제같위추다의 합니다.change이벤트. 파일 경로를 삭제하여 매번 변경할 수 있습니다.

jsFiddle의 예.

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

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

당신이 경우한도를 적이 ,.attr("value", "")그리고 작동하지 않았어요, 당황하지 마세요 (저처럼)

해요..val("") 잘 작동할 입니다, .

클릭 이벤트를 사용하여 사용자가 필드를 클릭할 때마다 대상 입력 값을 지웁니다.이렇게 하면 동일한 파일에 대해서도 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 = ''
}

다음은 저에게 효과적인 React-yway 솔루션입니다.

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

Click(클릭)에서 파일 입력 값을 지우고 Change(변경)에 파일을 게시하여 이 작업을 수행했습니다.이렇게 하면 동일한 파일을 두 번 연속으로 선택하고 변경 이벤트를 서버에 게시할 수 있습니다.이 예제에서는 jQuery 양식 플러그인을 사용합니다.

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

VueJs 솔루션

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

나를 위한 이 일

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

값을 빈 문자열로 설정하는 것이 가장 쉬운 방법일 것입니다.이렇게 하면 동일한 파일을 다시 선택하더라도 매번 파일을 강제로 '변경'하게 됩니다.

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

@britch 서감받아을영에▁angular▁j 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").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>

가장 간단한 방법은 변경 또는 입력 이벤트에서 직접 입력 값을 빈 문자열로 설정하는 것이며, 대부분은 이를 듣습니다.

onFileInputChanged(event) {
     // todo: read the filenames and do the work
     
     // reset the value directly using the srcElement property from the event
     event.srcElement.value = ""
}

jQuery를 사용하지 않으려면

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

잘 파이어폭스를 .this.value=null; 후

기본적으로 입력에 여러 속성이 있는 경우 파일을 선택한 후 입력 요소의 값 속성이 지워집니다.이 속성을 치료하지 않으면 동일한 파일을 선택해도 "변경" 이벤트가 실행되지 않습니다.은 다을사용이수있관다습니를 사용하여 할 수 .multiple기여하다.

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

언급

실행 중인 이벤트 유형에 따라 React에 대해 솔루션을 다음과 같이 조정해야 할 수도 있습니다.

onClick={(event): string => (event.currentTarget.value = "")}

은 수다없니를 만들 수 .change여기서 발사(아무것도 변하지 않았기 때문에 올바른 행동).하지만, 당신은 묶을 수 있습니다.click또한...너무 자주 불이 날 수도 있지만,하지만 둘 사이에는 많은 중간점이 없습니다.

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

Angular 11과 같은 문제입니다.다운로드한 파일 목록을 표시해야 했습니다.목록에 들어가면 이러한 파일을 삭제할 수 있습니다.그래서 나는 파일을 삭제하고 직접 다시 업로드하거나 같은 파일을 여러 번 연속으로 업로드할 수 없었습니다.

이전 코드: https://stackblitz.com/edit/angular-bxpsgn?file=src/app/app.component.ts

입력 파일에 컨트롤러를 추가하고 파일이 업로드될 때 값을 재설정하여 문제를 해결했습니다.입력 값이 업로드된 파일의 경로이기 때문에 입력의 참조를 통해 파일을 가져와야 했습니다.

고정 코드: https://stackblitz.com/edit/angular-ivy-noynch?file=src/app/app.component.ts

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

필리프만 덕분에

저는 위의 해결책을 통해 동일한 문제에 부딪혔지만 실제로 무슨 일이 일어나고 있는지에 대한 좋은 설명을 얻지 못했습니다.

제가 https://jsfiddle.net/r2wjp6u8/ 라고 쓴 이 솔루션은 DOM 트리에서 많은 변경을 하지 않고 입력 필드의 값만 변경합니다.성능 측면에서 볼 때 조금 더 나은 것이어야 합니다.

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>

저를 믿으세요, 그것은 분명히 여러분에게 도움이 될 거예요!

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

이것이 많은 여러분에게 도움이 되기를 바랍니다.

React를 사용하는 경우 이 문제를 해결할 수 있도록 키를 추가하기만 하면 됩니다.

let uid = 0;

function Example() {
  const [fileState, setFileState] = useState({
    key: uid,
  });

  function handleChangeSelectFile() {
    setFileState({
      key: ++uid,
    })
  }

  return (
    <input
      type="file"
      accept="image/jpeg,image/png"
      key={fileState.key}
      onChange={handleChangeSelectFile}
    />
  )
}

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

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

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'를 실행하는 함수를 만듭니다.그런 다음 원하는 파일을 선택하면 이벤트를 트리거할 수 있습니다.

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