我有一个用户表单,人们可以在其中更新他们的详细信息并将其保存到数据库中。
我添加了上传头像、裁剪图片并上传到服务器的功能(使用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'));
关于javascript - 使用 Jquery/Javascript 将 imgsrc 值发送到隐藏字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31678185/