[英]Using Jquery/Javascript to send imgsrc value to hidden field
我有一个用户表单,人们可以在其中更新其详细信息并将其保存到数据库中。
我添加了人们上传头像的功能,裁剪图像并将其上传到服务器(使用Cropper)。
当用户完成其图像裁剪后,脚本会更新HTML并将默认头像替换为新的头像,如下所示:
<div class="avatar-view" title="" data-original-title="Change the avatar">
<img src="../../scripts/cropper/img/20150728143117.png" alt="Avatar">
</div>
在头像下面是用户表单,其中包含其余详细信息和保存/提交按钮。 我为头像添加了隐藏字段,但我需要将新上传图像的值发送到此隐藏字段。 我已经找了各种各样的javascript / jquery来做这个,但到目前为止我似乎无法让它工作。
<form id="reg-form" name="r_form" method="post" action="/editor/go/user" enctype="multipart/form-data">
<div class="form-group">
<label for="avatar">avatar</label>
<input type="hidden" name="avatar" value="123">
</div>
<div class="form-group">
<label for="first_name"><i class="fa fa-star icon-red"></i> First name</label>
<input id="first_name" name="first_name" class="form-control" value="John">
</div>
<div class="form-group">
<label for="last_name"><i class="fa fa-star icon-red"></i> Last name</label>
<input id="last_name" name="last_name" class="form-control" value="Smith">
</div>
<button type="submit" class="btn btn-primary" name="form_submit" tabindex="15">Save</button>
<input type="hidden" name="user_id" value="41">
</form>
首先在隐藏的输入值中添加一个id,
<input id="avatar-val" type="hidden" name="avatar" value="123">
然后在单击按钮时执行此代码
$("#avatar-val").val($(".avatar-view>img").prop('src'));
使用查询获取当前图像的链接并将其设置为隐藏字段。
<div class="form-group">
<label for="avatar">avatar</label>
<input type="hidden" name="avatar" value="123">
</div>
<script>
var src = $('.avatar-view').find('img').attr('src');
$('input[name="avatar"]').attr('src', src)
</script>
你的img
标签需要有一个id。 然后你可以简单地使用DOM来改变src
。 然后,您可以将Javascript函数绑定到submit
按钮的onclick
属性。
<img id="change" src = "....">
...
<button type="submit" onclick="changeImage()" class="btn btn-primary" name="form_submit" tabindex="15">Save</button>
<script>
function changeImage(){
src = document.getElementById("change").src ;
document.getElementsByName("name")[0].value - src;
}
</script>
没有任何修改你可以使用像
var src=$('img[alt="Avatar"]').attr('src');
$('input:hidden[name=avatar]').val(src);
$(document).ready(function(){
$('#reg-form').submit(function() {
var newSrc = $('#ID_of_your_img').attr('src');
$('[name=avatar]').val(newSrc);
});
});
我希望这能帮到您。 如果您遇到任何问题,请随时提出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.