Question

我正在尝试从数据库中检索图像，以便以所选用户的模式显示。然而，我试图显示图像已被证明是徒劳的。我的问题是我无法检索要显示的所选用户图像的ID。任何帮助都将非常感激。

HTML（用户列表）

<table>
<tbody>
    @foreach($users as $key => $u)
        <tr class="id-here" data-id="{{$u->id}}">
            <input type="hidden" class="avatar" value="{{$u->avatar}}">
            <td class="firstname">{{$u->firstname}}</td>
            <td class="lastname">{{$u->lastname}}</td>
            <td class="email">{{$u->email}}</td>
            <td class="project">{{$project->countProject($u->id)}}</td>
            <td class="level">{{ucfirst($u->level)}}</td>
            <td class="status"><span class="label label-{{$u->confirmed_email==0?'default':'success'}}">{{$u->confirmed_email==0?'unconfirmed':'confirmed'}}</span></td>
            <td class="register">{{date("M j, Y g:i a", strtotime($u->created_at))}}</td>
            <td>
                {!!$u->level=='regular'?'<a class="btn btn-round btn-info edit get-id" title="edit" data-toggle="modal" data-target="#editModal"><i class="glyphicon glyphicon-edit"></i></a>':''!!}
                <a href="{{ROOT}}myprojects/{{$u->id}}" title="view projects" class="view btn btn-round btn-info"><i class="glyphicon glyphicon-eye-open"></i></a>
                    {!!$u->level=='regular'?'<a href="#" title="delete" class="btn btn-round btn-danger delete-user"><i class="glyphicon glyphicon-trash"></i></a>':''!!}
            </td>
        </tr>
    @endforeach
</tbody>
</table>
{!! str_replace('/?', '?', $users->render()) !!}

尝试

尝试1. HTML-- MODAL（循环播放数据但返回所有图片路径）

    <div class="form-group col-xs-6">
       <div class="uploader pull-right">
        <div class="pic-uploader">
            <input id="file-1" class="edit-user-avatar" type="file" multiple="true" value='{{ROOT}}<?php
                                $all_users = \DB::table('users')->where('level', '=', 'regular')->get();

            foreach ($all_users as $key => $value) 
            {
                $id = $value->id;
                $userImagePath = \DB::table('users')->where('id', '=', $id)->first(["avatar"]);

                if(preg_match("/^https/", $userImagePath->avatar))
                {
                    $pic = $userImagePath->avatar;
                }
                else
                {
                    echo $pic = $userImagePath->avatar;
                }
            }
        ?>'>
    </div>
    <div style="margin-top:-40px;">
         <small>File types allowed: <b>JPG</b>, <b>JPEG</b>, <b>PNG</b> or <b>GIF</b> • <b>1MB</b> file limit</small><br>
         <small>At least 1024x768 pixels • 4:3 aspect ratio</small>
     </div>
    </div>
    <input type="hidden" name="type" id="upload-type" value="user_avatar">
</div>

尝试2. HTML - MODAL（在隐藏输入中存储ID但无法检索ID）

<div class="form-group col-xs-6">
    <input type="hidden" name="userid" id="userid" value="<?php echo $userid = old('id')?>">
    <div class="uploader pull-right">
         <div class="pic-uploader">
            <input id="file-1" class="edit-user-avatar" type="file" multiple="true" value='{{ROOT}}<?php
                    $id = $userid;
                    $userImagePath = \DB::table('users')->where('id', '=', $id)->first(["avatar"]);

                    if(preg_match("/^https/", $userImagePath))
                    {
                        $pic = $userImagePath;
                    }
                    else
                    {
                        echo $pic = $userImagePath;
                    }
            ?>'>
        </div>
        <div style="margin-top:-40px;">
            <small>File types allowed: <b>JPG</b>, <b>JPEG</b>, <b>PNG</b> or <b>GIF</b> • <b>1MB</b> file limit</small><br>
            <small>At least 1024x768 pixels • 4:3 aspect ratio</small>
        </div>
    </div>
    <input type="hidden" name="type" id="upload-type" value="user_avatar">
</div>

JQUERY

$('.edit').click(function(){
    var obj = $(this).parent().parent();

    var fname = $(obj).find('.firstname').html();
    var lname = $(obj).find('.lastname').html();
    var status = $(obj).find('.status span').html();
    var avatarImg = $(obj).find('.avatar').html();
    var level = $(obj).find('.level').html().toLowerCase();
    var id = $(obj).attr('data-id');

    $('#edit-first-name').val(fname);
    $('#edit-last-name').val(lname);
    $('.edit-user-avatar').val(avatarImg);
    $('#userid').val(id); // retrieves id to store in hidden input


    if(status =='confirmed')
    {
        $('#edit-status').attr('checked','true');
    }
    else
    {
        $('#edit-status').removeAttr('checked');
    }

    //$('select#edit-title > option[value='+name[0].toLowerCase()+']').attr('selected','selected');
    $('select#edit-level > option[value='+level+']').attr('selected','selected');

    $('#uid').val(id);

    $('#user-password').removeAttr('checked');
    $('#user-data').attr('checked', 'checked');

    $('#edit-password').css('display','none');
    $('#edit-data').css('display','block');
});

Answer 1

取自Bootstrap documentation：

$('#editModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // link that triggered the modal
    var imageid = button.data('imageid') // Extract info from data-* attributes
    var modal = $(this)
    modal.find('.edit-user-avatar').val(imageid)
});

您只需更改编辑链接以包含data-imageid属性，并将图片ID作为值：

{!!$u->level=='regular'?'<a class="btn btn-round btn-info edit get-id" title="edit" data-imageid="{{ID GOES HERE}}" data-toggle="modal" data-target="#editModal"><i class="glyphicon glyphicon-edit"></i></a>':''!!}

使用laravel

尝试

1 个答案: