Javascript 使用blueimp文件上载完成文件上载后设置隐藏字段的值
我有下面的代码上传和显示的文件上传绝对罚款警报。但是,当文件名保存到我的服务器时,我正在向文件名添加内容,我希望jquery中的done函数使用保存的文件名更新隐藏字段的值。我以为这很简单,但事实并非如此。让我向您展示我正在使用的代码: 函数上载每个附加项表单的文件。这是应该做到的:Javascript 使用blueimp文件上载完成文件上载后设置隐藏字段的值,javascript,jquery,jquery-file-upload,blueimp,Javascript,Jquery,Jquery File Upload,Blueimp,我有下面的代码上传和显示的文件上传绝对罚款警报。但是,当文件名保存到我的服务器时,我正在向文件名添加内容,我希望jquery中的done函数使用保存的文件名更新隐藏字段的值。我以为这很简单,但事实并非如此。让我向您展示我正在使用的代码: 函数上载每个附加项表单的文件。这是应该做到的: function bindFileUpload() { $('.fileupload').fileupload({ dataType: 'json', done: funct
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> <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);
data.form.find('.itemPhotoFile').val(file.name);
});
}
});
};
在$内部。each()
,这是迭代的当前元素。但即使不是这样,我也不认为文件上传插件会将.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);
});
}
});
});
};
别胡闹,伙计!这已经困扰我好几天了。我想我还需要进一步了解JSON。data.form是作为对象发送的,对吗?是的-如果有疑问,只需执行console.log(参数)即可注销传递给当前函数的所有内容(在本例中,在$之前执行)。这样您就可以看到传递给“done”的内容在chrome中,很容易检查你得到的东西并提取你需要的东西!如果解决了问题,请将答案标记为正确:)啊,伙计,我不知道console.log(参数)。太好了,真是帮了大忙。真的,真的很感激!
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);
});
}
});
});
};