我目前正在一个网站上建立和图像上传和裁剪功能。工作流程如下
1。按下上传按钮。2.模态以一个上传框打开
modal代码:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Upload Profile Picture</h4>
</div>
<div class="modal-body">
<div id="load" class="display-none" style="width:32px;margin:150px auto;"><img src="img/loading2.gif"></div>
<div class="upload-container">
{!! Form::open(['file' => true, 'Method' => 'POST', 'id' => 'profile-image-upload']) !!}
<div class="alert alert-danger display-none error">
<p>File must be an image</p>
</div>
<div class="form-group">
{!! Form::label('upload', 'Upload Photo') !!}
{!! Form::file('upload', ['id' => 'file-select', 'class' => 'form-control upload-box']) !!}
</div>
{!! Form::close() !!}
</div>
<div id="image-box" class="image display-none" style="text-align:center;">
<img id="large-image" src="" style="max-width:100%;max-height:500px;display:inline-block;">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close-button" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
- 点击浏览按钮并选择一张照片,这会立即触发一个ajax请求来上传图像并返回其路径。服务器端代码:
Route::post('upload-profile-pic', function(){ $input['file'] = Request::file('upload'); $rules = ['file' => 'mimes:jpg,png,gif,jpeg']; $validator = Validator::make( $input, $rules ); if ($validator->fails()) return 'false'; $identifier = str_random(20); $image = Image::make(Request::file('upload')); $image->encode('png')->save(public_path(). '/profile-images/temp/' . $identifier . '.png'); return $identifier; });
- 在ajax成功时,我将结果图像加载到div中,并在模态中显示。Javascript (Jquery):
$('input[type=file]').change(function () { $('#load').show(); var formData = new FormData($('#profile-image-upload')[0]) $('.upload-container').hide(); $.ajax({ type: 'POST', url: 'upload-profile-pic', data: formData, cache: false, contentType: false, processData: false, success: function (data) { $('#load').hide(); console.log("success"); if (data != 'false') console.log(data) $("#large-image").attr('src', '/profile-images/temp/' + data + '.png'); $('.image').show(); if (data == 'false') $('.upload-container').show(); $('.error').show(); }, error: function (data) { $('#load').hide(); console.log("error"); console.log(data); } }); }); $('#myModal').on('hidden.bs.modal', function () { $('.error').hide(); $('.upload-container').show(); $('.image').hide(); $('#profile-image-upload').trigger("reset"); }) $('.close-button').on('click', function () { $('.error').hide(); $('.upload-container').show(); $('.image').hide(); $('#profile-image-upload').trigger("reset"); });
我也有两个函数重置模式,如果它被取消,这只是隐藏图像和显示上传框。
这一切工作,因为它应该,但我的问题是,我想应用Jcrop生成的图像。我已经尝试了很多事情
在ajax成功函数中我添加了这个
$("#large-image").attr('src', '/profile-images/temp/' + data + '.png').Jcrop();
上面的第一次工作,但如果模态关闭,然后用户再次尝试,它不会用新图像替换旧图像。
我试着添加
.done(fucntion(){ $("#large-image").Jcrop( });
这与最后一个选项相同,第一次有效,但之后不起作用。
我试过了
var image = $("#large-image");
然后添加到我的ajax成功
image.Jcrop()
并将其添加到结束函数
中image.destroy()
这与上次相同,第一次发生错误,并且在控制台中抛出错误。
JavaScript不是我的强项,我现在很困在这一点上,有人能帮助吗?
使用下面的代码解决这个问题:
$("#large-image").attr('src', '/profile-images/temp/' + data['identifier'] + '.png').Jcrop({}, function () {
jcrop_api = this;
$('.modal-dialog').animate({width: ($('#large-image').width() + 50)});
});
然后在关闭模态时调用
jcrop_api.destroy()