Holaa, tengo una función para cambiar la foto de perfil y al ejecutar en localhost en el navegador me esta saliendo este error en la consola POST jquery 404 (no encontrado): jquery.min.js:4. Alguien tiene una idea de como solucionarlo? Estuve viendo las rutas, pero no me resulto, sigue sin funcionar y no se como solucionarlo. Cualquier ayudita me vendría bien.
mi archivo .blade
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Croppie css -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
<!-- Font Awesome 5 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="card-body">
<h5 class="card-title">Actualizar perfil</h5>
<div class="profile-img p-3">
<img src="{{ asset('/images/icon-cam.png') }}" id="profile-pic">
</div>
<div class="btn btn-dark">
<input type="file" class="file-upload" id="file-upload"
name="profile_picture" accept="image/*">
Seleccionar nueva foto
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-content">
<div class="modal-body">
<button class="btn btn-block btn-dark" id="upload" >Continuar</button>
</div>
</div>
</div>
<!-- jQuery and Popper.js -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Boostrap 4 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Croppie js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.min.js"></script>
{{-- archivo js --}}
<script src="{{ asset ('photo/js.js') }}"></script>
Este es mi controlador
public function showJqueryImageUpload()
{
return view('demos.jqueryimageupload');
}
public function saveJqueryImageUpload(Request $request)
{
$validator = Validator::make($request->all(), [
'profile_picture' => 'required|image|max:1000',
]);
if ($validator->fails()) {
return $validator->errors();
}
$status = "";
if ($request->hasFile('profile_picture')) {
$image = $request->file('profile_picture');
$filename = time().'.'.$image->guessExtension();
$path = $request->file('profile_picture')->storeAs(
'profile_picture', $filename
);
$status = "uploaded";
}
return response($status,200);
}
y este mi archivo js con la funcion
$("#upload").on("click", function() {
croppie.result('base64').then(function(base64) {
$("#myModal").modal("hide");
$("#profile-pic").attr("src","/images/ajax-loader.gif");
var url = "{{url('demos/jquery-image-upload')}}";
var formData = new FormData();
formData.append("profile_picture", $.base64ImageToBlob(base64));
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'post',
url: url,
data: formData,
processData: false,
contentType: false,
success: function(data) {
if (data == "uploaded") {
$("#profile-pic").attr("src", base64);
} else {
$("#profile-pic").attr("src","/images/icon-cam.png");
console.log(data['profile_picture']);
}
},
error: function(error) {
console.log(error);
$("#profile-pic").attr("src","/images/icon-cam.png");
}
});
});
});
Routes:
Route::get('demos/jquery-image-upload','DemoController@showJqueryImageUpload');
Route::post('demos/jquery-image-upload','DemoController@saveJqueryImageUpload');
..................................................................
routes/web.php
que nos servirá para distinguir hacia a donde dirige la rutademos/jquery-image-upload