使用 blueimp File Upload 完成文件上传后设置隐藏字段的值答案

【问题标题】：Set value of hidden field AFTER file upload completes using blueimp File Upload使用 blueimp File Upload 完成文件上传后设置隐藏字段的值
【发布时间】：2013-10-22 01:18:14
【问题描述】：

我有下面的代码，它上传并显示上传文件的警报绝对没问题。但是，由于我在将文件名保存到我的服务器时将其添加到文件名中，因此 id 类似于 jquery 中的 done 函数，以使用保存的文件名更新隐藏字段的值。我以为这很简单，但事实并非如此。让我向您展示我正在使用的代码：

功能上传每个附加项目表格的文件。这可以正常工作：

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) 是正确的，并且找不到输入。我在上传之前找不到输入字段的值，因为这不是最终文件名。所以上传成功后它的工作很重要。

谢谢！

【问题讨论】：

标签： javascript jquery jquery-file-upload blueimp

【解决方案1】：

您将要在 data 参数中传递的“表单”中进行搜索：

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

【讨论】：

没有什么鬼东西！这几天一直困扰着我。我猜我需要更多地阅读 JSON。 data.form 是作为对象发送的，对吧？
是的 - 如有疑问，只需执行 console.log(arguments) 即可注销所有传递给当前函数的内容（在这种情况下，在 $.each 之前执行此操作，以便您可以看到什么被传递给“完成”功能。在 chrome 中，很容易检查你得到什么并拉出你需要的东西！如果它解决了问题，请将答案标记为正确:)
啊，我不知道console.log（参数）。太棒了，这样的帮助。真的，真的很感激！

【解决方案2】：

$.each() 内部，this 是迭代的当前元素。但即使不是，我认为文件上传插件也不会将.done 回调中的this 绑定到原始元素。所以我认为你需要用循环明确地做到这一点：

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

【讨论】：