0
I have a blank div, which dynamically receives an image, almost as soon as the page loads, this image is the Crop of the original image, I’m able to catch it through the code:
$('.class > img')
However when I play this in the ajax function, it returns me the HTTP number 500
I think it’s the names I’m passing to PHP.
Code jQuery:
$("#enviar").click(function() {
console.log($('.image-preview > img')[0] );
$.ajax({
url:"{{ route('receber.imagem') }}",
data:{
data:new FormData($(".img-preview > img")[0]),
},
dataType:'json',
async:false,
type:'post',
processData: false,
contentType: false,
success:function(response){
console.log(response);
}
});
});
PHP Code, PS:I’m using Laravel 5.4.
public function RecebeImagem(Request $request)
{
if($request->hasFile('img-preview'))
{
$imagem = $request->file('img-preview');
$numero = rand(1111,9999);
$diretorio = "img/uploads";
$extensao = $imagem->guessClientExtension();
$nomeImagem = "imagem_".$numero.".".$extensao;
$imagem->move($diretorio, $nomeImagem);
$caminho = $diretorio."/".$nomeImagem;
//dd($caminho);
return 'Imagem upada';
}
return 'Imagem não upada';
}`
HTML code:
<div class="row">
<div class="col-md-6">
<div class="image-crop">
<img src="{{ asset('img/profile_small.jpg') }}">
</div>
</div>
<div class="col-md-6">
<h4>Preview image</h4>
<div class="img-preview img-preview-sm"></div>
<h4>Comon method</h4>
<p>You can upload new image to crop container and easy download new cropped image.</p>
<div class="btn-group">
<label title="Upload image file" for="inputImage" class="btn btn-primary">
<input type="file" accept="image/*" name="file" id="inputImage" class="hide">Upload new image</label>
<label title="Enviar" id="enviar" class="btn btn-primary">Enviar</label>
</div>
<h4>Other method</h4>
<p>You may set cropper options with <code>$(image}).cropper(options)</code></p>
<div class="btn-group">
<button class="btn btn-white" id="zoomIn" type="button">Zoom In</button>
<button class="btn btn-white" id="zoomOut" type="button">Zoom Out</button>
<button class="btn btn-white" id="rotateLeft" type="button">Rotate Left</button>
button class="btn btn-white" id="rotateRight" type="button">Rotate Right</button>
<button class="btn btn-warning" id="setDrag" type="button">New crop</button>
</div>
</div>
Code Crop:
var $image = $(".image-crop > img")
$($image).cropper({
aspectRatio: 1.618,
preview: ".img-preview",
done: function(data) {
// Output the result data for cropping image.
}
});
This PHP code I used to upload an image.
There is no import error in HTML, I am 99% sure it is the problem are the Names, and as I know only the basics of jQuery is hard to debug and find where the error is.
PS: I can’t return anything from PHP to the Ajax function.
Post the entire code, there are errors I’ve seen, I’d need a minimal example of all this !
– novic
From jQuery and PHP, there is nothing else but HTML
– Matheus Picioli
You need to put the code with a minimum of understanding so there’s no way!
– novic
Hold on, I’ll put the HTML code
– Matheus Picioli
Ready! See if you can understand, glue it, it was all broken, but I think you can understand
– Matheus Picioli
Cade the Javascript of this CROP?
– novic
I think you can try converting this image to Base64 and then send.
– Aline
@Virgilionovic Crop is working perfectly, since the div that receives the image already cropped, is displaying normally. But take a look there, I’ll put the code. Aline with I can do this?
– Matheus Picioli