Jquery 如何检测输入类型=文件；更改“；同一个文件？

我想在用户选择文件时触发事件。使用

.change

事件执行此操作，如果用户每次都更改文件，则此操作有效

但是如果用户再次选择相同的文件，我想触发该事件

用户选择文件

A.jpg

（事件激发）

用户选择文件

B.jpg

（事件激发）

用户选择文件

B.jpg

（事件未激发，我希望它激发）

---

我该怎么做呢？

你不能让

改变

在这里开火（正确的行为，因为没有改变）。但是，您也可以绑定

单击
，虽然这可能会经常触发…但两者之间没有太多的中间地带

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

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


或者您也可以简单地使用
.prop（“value”和“）
，请参阅


jQuery 1.6+
prop
早期版本
attr
我通过清除文件输入值onClick，然后在onChange上发布文件来实现这一点。这允许用户连续两次选择同一个文件，并且仍然可以向服务器发布更改事件。我的示例使用

这是我的工作

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

如果您尝试了
.attr（“value”和“”）
但没有成功，请不要惊慌（就像我那样）

只要改为执行
.val（“”
），如果您不想使用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警报后。
您可以使用
form.reset（）
清除文件输入的
文件列表。
这会将所有字段重置为默认值，但在许多情况下，您可能只是在表单中使用输入type='file'来上载文件。
在这个解决方案中，不需要克隆元素并再次钩住事件

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

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

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

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



我遇到了同样的问题，我通读了上面的解决方案，但他们并没有得到任何很好的解释到底发生了什么

我编写的这个解决方案在DOM树中没有做很多更改，它只是更改输入字段的值。从性能方面来说应该更好一些

链接到小提琴：

上传

当前文件：


//获取日志元素
var log=document.querySelector（'.log'）；
//加载文件输入元素。
var inputElement=document.getElementById（'fileInput'）；
inputElement.addEventListener（'change'，currentFile）；
//将单击行为添加到按钮
document.getElementById（'btnSelectFile'）。addEventListener（'click'，selectFile'）；
函数selectFile（）{
if（inputElement.files[0]）{
//检查选择了多少文件并显示文件名
log.innerHTML+='文件总数：'+inputElement.files.length+'
'
//重置输入字段
log.innerHTML+='正在删除文件：'+inputElement.files[0].name+'
'
inputElement.value=''；
//检查选择了多少文件并显示文件名
log.innerHTML+='文件总数：'+inputElement.files.length+'
'
log.innerHTML+='
'
}
//一旦我们有了一个干净的幻灯片，打开“场选择”对话框。
inputElement.click（）；
};
函数currentFile（）{
//如果输入元素有一个文件
if（inputElement.files[0]）{
document.getElementById（'currentFile'）。innerHTML=inputElement.files[0]。名称；
}
}
因此，除非您存储每个文件并以编程方式进行比较，否则无法100%确保他们选择的是相同的文件

与文件交互的方式（当用户“上传”文件时JS所做的）是和



这些教程向您展示了如何在上传文件时捕获和读取元数据（存储为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;
};

//由于一些不同的场景处理，我在那里调用了两个`onchange event functions`。
//委派多个文件选择并打开
var DelegateMultipleFileSelectionAndOpen=函数（evt）{
如果（！evt.target.files）返回；
var selectedPhotos=evt.target.files；
//某些连续源
};
//显式删除文件输入值内存缓存
var disposeMultipleFilesSelections=函数（）{
this.val=null；
};

希望这能帮助你们很多人。
从@braitsch得到启发，我在AngularJS2
输入文件组件中使用了以下内容

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

VueJs解决方案

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

每次用户单击字段时，使用onClick事件清除目标输入的值。这可以确保同样的文件也会触发onChange事件。为我工作：）

onInputClick=（事件）=>{
event.target.value=“”
}

使用打字脚本

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

onInputClick=（事件：React.MouseEvent）=>{
const element=event.target作为HTMLInputElement
element.value=“”
}
可能最简单的方法就是将值设置为空字符串。这将强制它每次“更改”文件，即使再次选择相同的文件

为输入创建单击事件和更改事件。click事件清空输入并返回t
<input
                type="file"
                style="display: none;"
                ref="fileInput"
                accept="*"
                @change="onFilePicked"
                @click="$refs.fileInput.value=null"
>

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

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

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

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