Как определить тип ввода = «изменение файла» для того же файла?

Я хочу запустить событие, когда пользователь выбирает файл. Делая это с событием .change, это работает, если пользователь каждый раз меняет файл.

Но я хочу запустить событие, если пользователь снова выберет тот же файл.

  1. Пользователь выбирает файл A.jpg (события запускаются)
  2. Пользователь выбирает файл B.jpg (события запускаются)
  3. Пользователь выбирает файл B.jpg (событие не сработает, я хочу, чтобы оно сработало)

Как я могу это сделать?

77 голосов | спросил Gadonski 5 52010vEurope/Moscow11bEurope/MoscowFri, 05 Nov 2010 22:19:52 +0300 2010, 22:19:52

14 ответов


0

Вы можете обмануть это. Удалите элемент file и добавьте его в то же место в событии change. Это удалит путь к файлу, делая его изменяемым каждый раз.

Пример использования jsFiddle.

Или вы можете просто использовать .prop("value", ""), см. этот пример на jsFiddle .

  • jQuery 1.6+ prop
  • Ранние версии attr
ответил BrunoLM 7 72010vEurope/Moscow11bEurope/MoscowSun, 07 Nov 2010 18:14:46 +0300 2010, 18:14:46
0

Если вы попытались .attr("value", "") и не сработали, не паникуйте (как я)

просто сделайте .val(""), и все будет работать нормально

ответил Wagner Leonardi 20 MaramThu, 20 Mar 2014 04:47:32 +04002014-03-20T04:47:32+04:0004 2014, 04:47:32
0

Я получил это для работы, очистив входное значение файла onClick, а затем разместив файл в onChange. Это позволяет пользователю выбирать один и тот же файл два раза подряд и при этом отправлять события на сервер по-прежнему. В моем примере используется плагин формы jQuery .

$('input[type=file]').click(function(){
    $(this).attr("value", "");
})  
$('input[type=file]').change(function(){
    $('#my-form').ajaxSubmit(options);      
})
ответил braitsch 24 FebruaryEurope/MoscowbFri, 24 Feb 2012 08:34:30 +0400000000amFri, 24 Feb 2012 08:34:30 +040012 2012, 08:34:30
0

Вы можете просто установить null путь к файлу каждый раз, когда пользователь нажимает на элемент управления. Теперь, даже если пользователь выберет тот же файл, событие onchange будет запущено.

<input id="file" onchange="file_changed(this)" onclick="this.value=null;" type="file" accept="*/*" />
ответил Mariusz Wiazowski 29 Jpm1000000pmMon, 29 Jan 2018 13:50:23 +030018 2018, 13:50:23
0

Эта работа для меня

<input type="file" onchange="function();this.value=null;return false;">
ответил 5 Jpm1000000pmSun, 05 Jan 2014 14:36:24 +040014 2014, 14:36:24
0

По умолчанию свойство value входного элемента очищается после выбора файлов, если входные данные имеют несколько атрибутов. Если вы не очистите это свойство, событие «change» не будет запущено, если вы выберете тот же файл. Вы можете управлять этим поведением, используя атрибут multiple.

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

Ссылка

ответил Pulkit Aggarwal 30 Maypm18 2018, 12:40:25
0

Вы не можете заставить change срабатывать здесь (правильное поведение, так как ничего не изменилось). Тем не менее, вы также можете связать click ... хотя это может вызывать слишком часто ... нет Между тем, между ними есть нечто среднее.

$("#fileID").bind("click change", function() {
  //do stuff
});
ответил Nick Craver 5 52010vEurope/Moscow11bEurope/MoscowFri, 05 Nov 2010 22:20:59 +0300 2010, 22:20:59
0

Если вы не хотите использовать 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 20 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 20 Sep 2014 16:58:23 +0400 2014, 16:58:23
0

Вы можете использовать form.reset(), чтобы очистить files список. Это сбросит все поля к значениям по умолчанию, но во многих случаях вы можете использовать только ввод type = 'file' в форме для загрузки файлов в любом случае. В этом решении нет необходимости клонировать элемент и заново перехватывать события.

Благодаря philiplehmann

ответил Rui Nunes 9 FebruaryEurope/MoscowbTue, 09 Feb 2016 18:20:21 +0300000000pmTue, 09 Feb 2016 18:20:21 +030016 2016, 18:20:21
0

Ну, у меня была та же проблема. Я использовал событие «input» (или oninput) вместо change, и оно работало как шарм.

ответил Diomos 31 Jpm1000000pmTue, 31 Jan 2017 18:01:43 +030017 2017, 18:01:43
0

Я столкнулся с той же проблемой, я ознакомился с приведенными выше решениями, но они не получили хорошего объяснения того, что на самом деле происходило.

Это решение, которое я написал 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 21 J000000Saturday18 2018, 01:32:20
0

Таким образом, невозможно на 100% быть уверенным, что они выбирают один и тот же файл, если вы не сохраните каждый файл и не сравните их программно.

То, как вы взаимодействуете с файлами (то, что делает JS, когда пользователь «загружает» файл) - это Файловый API HTML5 и 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, которая будет считывать> store-> сравнивать метаданные текущего файла с предыдущими файлами. Затем вы можете запустить свое событие, когда выбран нужный файл.

ответил Stephanie Schellin 9 +03002018-10-09T16:19:58+03:00312018bEurope/MoscowTue, 09 Oct 2018 16:19:58 +0300 2018, 16:19:58
0

Поверьте, это вам определенно поможет!

// 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 20 +03002018-10-20T22:12:29+03:00312018bEurope/MoscowSat, 20 Oct 2018 22:12:29 +0300 2018, 22:12:29
0

Вдохновившись @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) спас меня: -)

ответил MKJ 8 42018vEurope/Moscow11bEurope/MoscowThu, 08 Nov 2018 19:36:52 +0300 2018, 19:36:52

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132