使用 blueimp 文件上传完成后设置隐藏字段的值
Set value of hidden field AFTER file upload completes using blueimp File Upload
我有以下代码,可以上传并显示上传的文件的警报,绝对正常。但是,当我将文件名保存到我的服务器时,我会向文件名添加内容,因此 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> <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)
正确是什么,也找不到输入。上传前我找不到输入字段的值,因为这不是最终文件名。因此,在上传成功后,它必须工作。
谢谢!
您需要从数据参数中传递的"表单"中进行搜索:
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()
中,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);
});
}
});
});
};
相关文章:
- 在jquery中为显示/隐藏设置cookie
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 如何使用javascript将值引导下拉列表设置为隐藏值asp.net
- 通过ng-if设置隐藏文本框的值
- 在提交时设置表单隐藏值
- 如何使用 JavaScriptJQuery 将隐藏输入标签的值与选择标签的选定选项的值进行设置
- 获取下一个或上一个隐藏元素的高度,以设置父元素的高度.jquery.
- 如何在代码镜像编辑器中设置隐藏值
- <asp.隐藏字段>即使在javascript中设置了值,codeehind中的值也会变为空
- getElementById().value未设置隐藏输入
- 仅当onclick和隐藏消息时设置cookie
- 如何在隐藏的文本框上设置焦点
- 根据两个下拉菜单的选择设置隐藏值
- jQuery-是否可以使用jQuery在隐藏的文本框中设置值
- 设置隐藏值后重新加载页面
- 在代码隐藏中从DataTable设置javascript数组
- Wistia Javascript API-设置视频泡沫真实和隐藏社交按钮
- 如何在使用servlet处理时使用javascript设置隐藏变量的值
- 从 C# 代码隐藏设置传单缩放区域
- 从JavaScript或代码隐藏设置AjaxFileUpload控件的te值