Estoy usando croppie.js para recortar la imagen cargada por el usuario, una vez que se realiza el recorte, se usa ajax para cargar el resultado. Aquí están los códigos para eso...
Página A..
$('.upload-result').on('click', function (ev) { $uploadCrop.croppie('result', { type: 'canvas', size: 'viewport' }).then(function (resp) { $.ajax({ url: "uploadown/uploader.php", type: "POST", data: {"image":resp}, success: function (data) { html = '<img id="cropresult" style="margin: 0px;" src="' + resp + '" />; $("#uploaded-input").html(html); } }); }); });Entonces uploader.php es...
<?php $data = $_POST['image']; list($type, $data) = explode(';', $data); list(, $data) = explode(',', $data); $data = base64_decode($data); $imageName = time().'.png'; file_put_contents($imageName, $data); ?> Como puede ver, uploader.php está usando time() para la variable $imageName.
Necesito pasar $imageName de vuelta a la página A durante la carga o configurar $imageName en la página A primero y pasarlo a uploader.php al mismo tiempo que la información de la imagen.
Después de unas horas y muchos intentos, he leído muchas preguntas similares aquí y no puedo encontrar la manera de hacerlo. Cualquier ayuda muy apreciada.
simplemente echo del nombre en php o var_dump() la matriz y luego podrá acceder a ella en su javascript. Todos los datos de la página php se agregan al nombre de la variable que le da a la función anónima que le da a la devolución de llamada exitosa. para su caso se accederá como data
Haga eco de $imageName en el archivo php, una vez que haya terminado, utilícelo en javascript.
PHP
<?php $data = $_POST['image']; list($type, $data) = explode(';', $data); list(, $data) = explode(',', $data); $data = base64_decode($data); $imageName = time().'.png'; if(file_put_contents($imageName, $data)){ echo $imageName; } else { echo " ";//In this case src will be empty } ?>secuencia de comandos Java
$('.upload-result').on('click', function (ev) { $uploadCrop.croppie('result', { type: 'canvas', size: 'viewport' }).then(function (resp) { $.ajax({ url: "uploadown/uploader.php", type: "POST", data: {"image":resp}, success: function (data) { html = '<img id="cropresult" style="margin: 0px;" src="' + data + '" />'; $("#uploaded-input").html(html); } }); }); });Para cualquier consulta comenta abajo.
Encontré su ejemplo completo aquí: https://websolutionstuff.com/post/crop-image-before-upload-using-croppie-plugin
Considere el siguiente PHP.
<?php $data = $_POST['image']; list($type, $data) = explode(';', $data); list(, $data) = explode(',', $data); $data = base64_decode($data); $imageName = time().'.png'; if(file_put_contents($imageName, $data)){ echo "Success, " . $imageName; } else { echo "Error, unable to Put file."; } ?>Esto proporcionará una respuesta al AJAX Script.
$('.upload-result').on('click', function (ev) { $uploadCrop.croppie('result', { type: 'canvas', size: 'viewport' }).then(function (resp) { $.ajax({ url: "uploadown/uploader.php", type: "POST", data: { "image":resp }, success: function (data) { var response = data.split(","); var html; if(response[0] != "Error"){ html = '<img id="cropresult" style="margin: 0px;" src="' + response[1].trim() + '" />'; $("#uploaded-input").html(html); } else { console.log(data); } } }); }); });