jquery - 如何检测同一文件的输入类型=文件“更改”?

我想在用户选择文件时触发事件。 使用B.jpg事件,如果用户每次更改文件,它都可以使用。

但是如果用户再次选择相同的文件,我想激活该事件。

  1. 用户选择文件B.jpg(事件触发)
  2. 用户选择文件B.jpg(事件触发)
  3. 用户选择文件B.jpg(事件不会触发,我希望它触发)

我该怎么做?

Gadonski asked 2019-09-11T05:45:31Z
15个解决方案
65 votes

如果你已经尝试过.attr("value", "")并且没有工作,请不要惊慌(就像我一样)

只需要做.val(""),并且会正常工作

Wagner Leonardi answered 2019-09-11T05:46:44Z
62 votes

你可以欺骗它。 删除文件元素并将其添加到attr事件的相同位置。 它将擦除文件路径,使其每次都可以更改。

关于jsFiddle的示例。

或者你可以简单地使用attr,在jsFiddle上看到这个例子。

  • jQuery 1.6+ attr
  • 早期版本attr
BrunoLM answered 2019-09-11T05:46:12Z
15 votes

我通过清除onClick上的文件输入值然后将文件发布到了更改来实现此功能。 这允许用户连续两次选择相同的文件,并且仍然将更改事件触发以发布到服务器。 我的例子使用了jQuery表单插件。

$('input[type=file]').click(function(){
    $(this).attr("value", "");
})  
$('input[type=file]').change(function(){
    $('#my-form').ajaxSubmit(options);      
})
braitsch answered 2019-09-11T05:47:10Z
14 votes

每次用户单击控件时,您都可以将文件路径设置为null。 现在,即使用户选择了相同的文件,也会触发onchange事件。

<input id="file" onchange="file_changed(this)" onclick="this.value=null;" type="file" accept="*/*" />
Mariusz Wiazowski answered 2019-09-11T05:47:35Z
7 votes

这对我有用

<input type="file" onchange="function();this.value=null;return false;">
answered 2019-09-11T05:48:00Z
6 votes

每次用户单击字段时,使用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 = ''
}
Trafalgar Law answered 2019-09-11T05:48:31Z
3 votes

来自@braitsch的鼓励我在AngularJS2中使用了以下内容onClick(event)

<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)救了我:-)

MKJ answered 2019-09-11T05:49:10Z
3 votes

VueJs解决方案

<input
                type="file"
                style="display: none;"
                ref="fileInput"
                accept="*"
                @change="onFilePicked"
                @click="$refs.fileInput.value=null"
>
Micheal C Wallas answered 2019-09-11T05:49:38Z
2 votes

默认情况下,如果输入具有多个属性,则在选择文件后清除input元素的value属性。 如果不清除此属性,则在选择同一文件时不会触发“更改”事件。 您可以使用multiple属性管理此行为。

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

参考

Pulkit Aggarwal answered 2019-09-11T05:50:07Z
1 votes

你不能在这里发change(正确的行为,因为没有改变)。 但是,你也可以绑定click ......虽然这可能会经常发生......但两者之间并没有多少中间立场。

$("#fileID").bind("click change", function() {
  //do stuff
});
Nick Craver answered 2019-09-11T05:50:39Z
1 votes

如果你不想使用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;

elshnkhll answered 2019-09-11T05:51:18Z
0 votes

您可以使用form.reset()清除文件输入的files列表。这会将所有字段重置为默认值,但在许多情况下,您可能只是在表单中使用输入type ='file'来上传文件。在此解决方案中,无需克隆元素并再次重新挂钩事件。

感谢philiplehmann

Rui Nunes answered 2019-09-11T05:51:54Z
0 votes

我遇到了同样的问题,我通过他上面的解决方案,但他们没有得到任何正确的解释。

我写的这个解决方案[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>
Ballpin answered 2019-09-11T05:52:48Z
0 votes

因此,除非您存储每个文件并以编程方式对它们进行比较,否则无法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'的函数,该函数将读取 - >存储 - >将当前文件的元数据与以前的文件进行比较。 然后,您可以在选择所需文件时触发事件。

Stephanie Schellin answered 2019-09-11T05:53:57Z
0 votes

相信我,它一定会帮到你!

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

希望这会帮助你们很多人。

ArifMustafa answered 2019-09-11T05:54:31Z
translate from https://stackoverflow.com:/questions/4109276/how-to-detect-input-type-file-change-for-the-same-file