I would like to create a function that you can often see on Twitter and Facebook where you can cut out and register images by changing your profile image.The process of cutting out and registering the image is not sufficiently verified, but once it was implemented, there is one thing that cannot be implemented successfully.
◼
1. Select the image for your profile on the screen
2. Run the change event when selecting the image in the file selection
3. Send the selected image in ajax to the server side by POST
4. Save the image received on the server side to the tmp folder
5. The path of the tmp folder is response
6. Set the path of tmp to the image tag of the profile image in the success process
7. Display images in the tmp folder as bootstrap modal
8. To change the image, press the cancel button on modal
9. Select a different image again→ Back to 1.
◼ 実現What's troubling me about not being able to realize it
Implemented the above sequence of actions, and the process up to 7. is working fine, but the image remains the first image you selected when you operate 8.9.
◼ ソースSource code
Import Library (cropper.js)
<?phpechoAsset::js('cropper.min.js');?>
view
<div>
<input type="file" id="profileImg"name="">
<divid="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" area-label="Close">spanaria-hidden="true">times;</span><>/button>
<h4class="modal-title">Select profile photo range</h4>
</div>
<div class="modal-body">
<img src="id=target" alt="title="/>
<p>error message</p>
</div>
<div class="modal-footer">
<button id="close_pi" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="applied" type="button" class="btn btn-primary">apply</button>
</div>
</div><!--/.modal-content-->
</div><!--/.modal-dialog-->
</div><!--/.modal-->
</div>
javascript
$('#profileImg').change(function(e){
file=e.target.files[0];
varformData = newFormData($('#pi-form').get(0));
formData.append('profile_img',file);
$.ajax({
url: '<?phpecho$url['uptmp']?>',
type: 'post',
data —FormData,
processData: false,
contentType: false,
dataType: 'json',
success:function(data){
// Set saved file path to input file src
$('#target').atttr('src', data['saved_as']);
// Viewing Modal
$('.modal').modal('show');
// cropper.js Configuration
$('#target').cropper({
expectRatio: 1,
guides —false,
background: false,
crop:function(e){
// processing
}
});
}
});
});
Server Side (Fuelphp)
public function post_uptmp()
{
$data=array('saved_as'=>', 'msg'=>');
$input_file=Input::file();
$upload_path=Config::get('base.dir_profile').DIRECTORY_SEPARATOR.'tmp';
$upload_config=self::$UPLOAD_CONFIG+array('path'=>$upload_path);
// validation
$validation=$this->create_validation($upload_config,$input_file);
if(!$validation->run())
{
// In case of an error
$data['msg'] = $validation->error_message();
return$this->response($data,400);
}
else
{
$util=newUtil_Photo();// This class was created by itself
$result=$util->photo_upload($upload_config); // Describes the process of uploading to the tmp folder
// Retrieving the path of the tmp file and storing it in $data['saved_as']
$data['saved_as']=self::$BASE_Folder.DIRECTORY_SEPARATOR.'tmp'.DIRECTORY_SEPARATOR.$result['file_data']['saved_as'];
return $this->response($data,200);
}
}
他 I tried another library called JCrop, but it turned out to be the same thing.
*When I commented out the following part of the above code javascript, the image was changed to a changed image successfully by operating the procedure in 8.9. described in "What I want to do".
// cropper.js Configuration
$('#target').cropper({
expectRatio: 1,
guides —false,
background: false,
crop:function(e){
// processing
}
});
◼ 環境Development Environment
framework:Fuelphp
jquery —jquery-2.2.4
DB:MySQL
browsers:Google Chrome, Safari
terminals:MacBook Air, OS X 10.11.5
I think the value of $('#profileImg') has the first selected image left.
If you cancel, don't you think you need to empty it at the end of the process?
The cropper side appears to have retained the previous results.
Why don't you initialize before replacing the image?
//=========Add initialization process===========
$('#target') .cropper("destroy");
// Set saved file path to input file src
$('#target').atttr('src', data['saved_as']);
// ===== Maybe this is the initialization process.
// Viewing Modal
$('.modal').modal('show');
// cropper.js Configuration
$('#target').cropper({
expectRatio: 1,
guides —false,
background: false,
crop:function(e){
// processing
}
});
© 2024 OneMinuteCode. All rights reserved.