从click事件外部检索Id

Question

我正在尝试将用户ID从点击事件功能传递到fileinput功能（如下所示），以便用户图像可以上传到数据库。但是，在尝试执行此操作时，我将返回 undefined 。

的 HTML

表

<tbody>
    @foreach($users as $key => $u)
    <tr class="id-here" data-id="{{$u->id}}">
        <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'?'<button class="btn btn-round btn-info edit get-id" title="edit" data-toggle="modal" data-target="#editModal"><i class="glyphicon glyphicon-edit"></i></button>':''!!}
                                                <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

模态

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <form class="user-form" method="POST" action="{{ROOT}}users/edit">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Edit user</h4>
        </div>
        <div class="modal-body">
            @if(Session::has('type')&&Session::get('type')=='edit')
            @if (count($errors) > 0)
            <div class="alert alert-danger" role="alert">
             <strong>Whoops!</strong> There were some problems with your input.<br><br>
                    <ul class="error-container">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                    </ul>
            </div>
            @endif
            @endif
            <div class="row">
                <div class="form-group col-xs-6">                   
                    <label class="" for="user-name">Firstname</label>
                    <input class="form-control input-area" id="edit-first-name" type="text" placeholder="Firstname" value="{{ old('firstname') }}" name="firstname"/>
                </div>
                <div class="form-group col-xs-6">
                    <label class="" for="user-name">Lastname</label>
                    <input class="form-control input-area" id="edit-last-name" type="text" placeholder="Lastname" value="{{ old('lastname') }}" name="lastname"/>
                </div>
                <div class="form-group col-xs-6">
                    <label class="" for="user-name">Account type</label>
                    <select name="level" id="edit-level" class="form-control input-area" {{Auth::user()->level=='admin'?'disabled':''}}>
                            <option value="regular">Regular</option>
                            <option value="admin">Admin</option>
                            <option value="supervisor">Supervisor</option>
                    </select>
                </div>
                <div class="form-group col-xs-6">

                    <div class="uploader pull-right">
                        <div class="pic-uploader">
                            <input id="file-1" type="file" multiple="true" value="">
                        </div>
                        <div style="margin-top:-45px;width:350px;margin-left:-70px;">
                        <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="avatar">

                </div>
                <div class="form-group col-xs-12">
                    <input name="email_confirm" id="edit-status" type="checkbox"/>
                    <label>Email confirmation</label>
                </div>
            </div>
        </div>
        <div class="modal-footer">          
            <input type="hidden" name="id" id="uid">    
            <div class="row user-final">
                <div class="col-xs-12">
                    <input class="button-submit button-block" type="submit" value="Save changes" id="edit-button" />
                </div>
            </div>
        </div>
        </form>
    </div>
</div>

的 JAVASCRIPT

<script type="text/javascript">

var trid;
$('.id-here' ).click(function() {
   trid = $(this).closest('tr').data('id');
});

$("#file-1").fileinput({
    uploadUrl: '{{ROOT}}fileuploads',
    uploadAsync: true,
    showUpload: false,
    showCaption: false,
    showCancel: false,
    showRemove: true,
    browseClass: "btn btn-default btn-sm",
    allowedFileExtensions : ['jpg', 'png','gif'],
    maxFileSize:1000,
    uploadExtraData: {
        other_user_id: trid,
        type: 'user_avatar'
    },
});
</script>

Answer 1

您可以使用refresh方法更新uploadExtraData

  

根据提供的选项刷新文件输入插件。您可以提供一组插件选项作为参数。此方法将文件输入元素作为jQuery对象返回，因此可以与其他方法链接。

使用

$('.id-here' ).click(function() {
   trid = $(this).closest('tr').data('id');
   $("#file-1").fileinput('refresh', {uploadExtraData: {
        other_user_id: trid,
        type: 'user_avatar'
    }})
});

$("#file-1").fileinput({
    uploadUrl: '{{ROOT}}fileuploads',
    uploadAsync: true,
    showUpload: false,
    showCaption: false,
    showCancel: false,
    showRemove: true,
    browseClass: "btn btn-default btn-sm",
    allowedFileExtensions : ['jpg', 'png','gif'],
    maxFileSize:1000
});