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'));

Answer 2

使用查询获取当前图像的链接并将其设置为隐藏字段。

<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>

Answer 3

您的img代码需要有ID。然后，您只需使用DOM即可更改src。然后，您可以将Javascript函数绑定到onclick按钮的submit属性。

<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>

Answer 4

无需任何修改即可使用

   var src=$('img[alt="Avatar"]').attr('src');
   $('input:hidden[name=avatar]').val(src);

Answer 5

$(document).ready(function(){

     $('#reg-form').submit(function() {
         var newSrc = $('#ID_of_your_img').attr('src');
         $('[name=avatar]').val(newSrc);
     });

});

我希望这会对你有所帮助。如果您遇到任何问题，请随时提出。

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

5 个答案: