Вопрос по internet-explorer, javascript, google-chrome, firefox, jquery – Загружайте файлы, используя поле ввода type = «file» с событием .change (), которое не всегда срабатывает в IE и Chrome [duplicate]

22

This question already has an answer here:

jQuery change method on input type=“file” 3 answers

У меня есть простой кусок кода для загрузки файлов:

<code>$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $('form').submit();
    });
});

<form class="attachmentsUpload" action="/UploadHandler.ashx" method="post" enctype="multipart/form-data">
    <input type="file" class="file" name="file" />
</form>
</code>

Пока я нажимаю на ввод и затем выбираю файл в диалоговом окне, я отправляю этот файл, используя ajax. Это не важная часть здесь. Важным моментом является то, что, хотя я выбираю один и тот же файл второй раз в диалоговом окне, сразу после отправки первого файла событие .change () не срабатывает в IE и Chrome. Но пока я выбираю другой файл, событие срабатывает и работает правильно. Под Firefox он все время стреляет.

Как обойти это, чтобы работать как положено (как в Firefox)?

@Jason: к сожалению, это ничего не меняет jwaliszko
stackoverflow.com/questions/4150256/…  Это может быть полезно! Selvaraj M A
попробуйте использовать live - $ («.attachmentsUpload input.file»). live («изменить», функция () {$ («форма»). submit ();}); Jason
из jQuery 1.7+ вы должны использовать сейчас .on («изменить», f) TheSoftwareJedi

Ваш Ответ

2   ответа
29
Description

что значение поля ввода (выбранный путь к файлу) не изменяется, если вы снова выберите тот же файл.

Вы можете установить значение вonChange() событие в пустую строку и отправьте форму, только если значение не пустое. Посмотрите на мой образец и этоДемонстрация jsFiddle.

Sample
$(".attachmentsUpload input.file").change(function () {
    if ($(".attachmentsUpload input.file").val() == "") {
        return;
    }
    // your ajax submit
    $(".attachmentsUpload input.file").val("");
});
Update

Это, по любой причине, не работает в IE9. Вы можете заменить элемент, чтобы сбросить их. In this case you need jQuery live() to bind the event, because your input field will dynamically (re)created. Это будет работать во всех браузерах.

Я нашел это решение в ответе stackoverflowОчистка типа ввода = "файл" используя jQuery

$(".attachmentsUpload input.file").live("change", function () {
    if ($(".attachmentsUpload input.file").val() == "") {
        return;
    }
    // get the inputs value
    var fileInputContent = $(".attachmentsUpload input.file").val();
    // your ajax submit
    alert("submit value of the file input field=" + fileInputContent);
    // reset the field
    $(".attachmentsUpload input.file").replaceWith('<input type="file" class="file" name="file" />');
});​
More Information jQuery.live() jQuery.replaceWith() Check out my updated jsFiddle

Note: live сейчасremoved из более поздних версий jQuery. Пожалуйста, используйтеon вместоlive.

@JarekWaliszko ты прав. Мой ответ обновлен.
@JarekWaliszko Я думаю, это происходит потому, что запрос ajax является асинхронным. Таким образом, вы можете попытаться сохранить значение поля в переменной перед его сбросом. Затем отправьте свою переменную. мой ответ обновлен
Обратите внимание, что в jQuery 1.7 метод .live () устарел, но вместо него можно использовать .on () или .delegate (). Смотрите документацию по jQuery наapi.jquery.com/live для дополнительной информации.
@dknssck: спасибо за усилия, но по какой-то причине это работает в Chrome и Firefox, но не передает файл на сервер в IE (IE9, ContentLength равен 0 на стороне сервера). jwaliszko
Это помогло для Chrome, но не для IE (IE9) jwaliszko
1

usage of jquery live to bind change event and resetting the input field after submit:

$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $('form').submit();  /* sync submit */
        $(".attachmentsUpload input.file").replaceWith('<input type="file" class="file" name="file" />');
    });
});

Сброс должен быть выполненafter submit событие сделано. Когда отправитьasyncсбросьте поле например вajax success событие.

$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $('form').submit();  /* async submit */
    });
});

.ajaxForm({
    ...
    success: function (result) {
        // reset the field - needed for IE to upload the same file second time                    
        $this.find("input.file").replaceWith('<input type="file" class="file" name="file" />');
    }
});

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