我正在尝试从数据库中检索图像,以便以所选用户的模式显示。然而,我试图显示图像已被证明是徒劳的。我的问题是我无法检索要显示的所选用户图像的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');
});
答案 0 :(得分:0)
$('#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>':''!!}