javascript - 使用 Jquery/Javascript 将 imgsrc 值发送到隐藏字段

Question

我有一个用户表单，人们可以在其中更新他们的详细信息并将其保存到数据库中。

我添加了上传头像、裁剪图片并上传到服务器的功能(使用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>

Answer 1

首先给隐藏的输入值加上一个id，

<input id="avatar-val" type="hidden" name="avatar" value="123">

然后在点击按钮时执行这段代码

$("#avatar-val").val($(".avatar-view>img").prop('src'));