Задать значение скрытого поля ПОСЛЕ завершения загрузки файла с помощью blueimp Загрузка файла

0

У меня есть код ниже, который загружает и отображает предупреждение о загруженном файле. Однако, поскольку я добавляю материал к имени файла, когда он сохраняет его на моем сервере, идентификатор, подобный выполненной функции внутри jquery, обновляет значение скрытого поля с сохраненным именем файла. Я думал, что это будет просто, но это не так. Позвольте мне показать вам код, с которым я работаю:

функция для загрузки файлов каждой формы с добавленным элементом. Это работает так, как должно:

function bindFileUpload() {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
            });
        }
    });
};

Код, который я использую для добавления дополнительных форм, приведен ниже. Опять же, это прекрасно работает в сочетании с вышеупомянутой функцией. Вход, который я хочу установить, равен .itemPhotoFile

$(document).on('click','.addItem', function(){
    $('<!--ROW START-->\
        <form class="widget-content item">\
            <div class="row">\
                <div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>\
                <div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
                <div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
                <input type="hidden" class="itemId" name="itemId[]" value="">\
                <input type="hidden" class="itemPhotoFile" name="itemPhoto[]" value="">\
                <input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
                <input type="hidden" name="itemParent[]" value="'+$(this).closest('.formHolder').data('parent-room')+'">\
                <div class="col-md-2">\
                    <div class="fileinput-holder input-group" data-item-id="">\
                        <!-- <div class="uploadPhotoBox">Upload Photo</div> -->\
                        <input class="fileupload" type="file" name="files[]" data-url="uploads/">\
                    </div>\
                </div>\
                <div class="col-md-1 align-center"><i class="save icon-ok large"> </i>&nbsp;&nbsp;&nbsp;<i class="delete icon-trash large"> </i></div>\
            </div>\
        </form>\
    <!--/ROW END-->').fadeIn(500).appendTo($(this).parents().siblings('.items')).each(function(){
        bindFileUpload();
    });
    $(this).parents().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
});

Я пробовал идеи, такие как:

function bindFileUpload() {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
                $(this).closest('.itemPhotoFile').val(file.name);
            });
        }
    });
};

но не повезло, я не думаю, что он знает, что $(this) правильно и не может найти вход. Я не могу найти значение поля ввода BEFORE, поскольку это не окончательное имя файла. Поэтому важно, чтобы он работал ПОСЛЕ успеха загрузки.

Благодарю!

Теги:
jquery-file-upload
blueimp

2 ответа

1
Лучший ответ

Вы захотите выполнить поиск внутри "формы", которая передается внутри аргумента данных:

function bindFileUpload() {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
                data.form.find('.itemPhotoFile').val(file.name);
            });
        }
    });
};
Поделиться
  • 0
    Нет, черт возьми, чувак! Это беспокоило меня уже несколько дней. Я предполагаю, что мне нужно больше читать о JSON. data.form - это то, что отправляется как объект, верно?
  • 0
    да - если вы сомневаетесь, просто сделайте console.log (arguments), чтобы записать все, что передано текущей функции (в этом случае, сделать это до $ .each, чтобы вы могли видеть, что передается в «done» "Функция. В Chrome легко проверить, что вы получаете, и вытащить то, что вам нужно! Пожалуйста, отметьте ответ как правильный, если это решит проблему :)
Показать ещё 1 комментарий
0

Внутри $.each() this текущий элемент итерации. Но даже если это не так, я не думаю, что плагин загрузки файлов связывает this в .done с исходным элементом. Поэтому я думаю, что вам нужно сделать это явно с помощью цикла:

function bindFileUpload() {
    $('.fileupload').each(function() {
        var $that = $(this);
        $that.fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    alert(file.name);
                    $that.closest('.itemPhotoFile').val(file.name);
                });
            }
        });
    });
};
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню