Поэтому я недавно увидел учебник и создал функцию обрезки и загрузки изображений на веб-сайте. В моем случае у меня есть: -
a. Title
b. Description
c. Image
d. Date
Изначально я делал то же самое в учебнике, когда нажимали на просмотр файла, изображение монтировалось бы в модале Bootstrap 4, где была возможность обрезать. Основная проблема заключалась в том, что, когда я нажал на эту кнопку обрезки, ajax использовал для запуска и сохранения всех данных в базе данных. Позже я изменил JavaScript, чтобы при нажатии кнопки кадрирования отображалось обрезанное изображение и, наконец, кнопка «Отправить» сохраняла все данные в базе данных. Эта функция хорошо работает в Localhost, но когда я обновляюсь на своем живом веб-сайте, кажется, что функции не работают.
Код JavaScript:
$('.crop_image').click(function(event){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$('#uploadimageModal').modal('hide');
$("#previewImg").attr('src', response);
getResponse = response;
});
$('#upload_btn').on('click',function(){
var block = getResponse.split(";");
// Get the content type
var contentType = block[0].split(":")[1];// In this case "image/gif"
// get the real base64 content of the file
var realData = block[1].split(",")[1];// In this case "iVBORw0KGg...."
// Convert to blob
var blob = b64toBlob(realData, contentType);
let formData = new FormData(form);
formData.append('image_path', blob);
$.ajax({
url: "{{ path('app_bundle_route') }}",
type: 'POST',
data: formData,
processData: false,
contentType: false,
headers: {'X-Requested-With':'XMLHttpRequest'},
success: function(data){
$("#previewImg").attr('src', getResponse);
}
});
Контроллер:
/**
* @Security("is_granted('ROLE_ADMIN')")
* @Route("/form", name="form")
*/
public function indexAction(Request $request) {
$members = new members();
$form = $this->createForm(event::class, $members);
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
return $this->redirectToRoute('dev');
}
return $this->render('admin/create.html.twig', [
'form' => $form->createView()
]);
}
/**
* @Security("is_granted('ROLE_ADMIN')")
* @Route("/getImage", name="getImage")
* @Method({"POST"})
*/
public function getImageAction(Request $request){
$members = new members();
$form = $this->createForm(event::class, $members);
$form->handleRequest($request);
if($form->isSubmitted() && $form->isValid()){
if($request->isXmlHttpRequest()){
/** @var Symfony\Component\HttpFoundation\File\UploadedFile $file */
$file = $request->files->get('image_path');
//$file = $form->get('image_path');
$filename = md5(uniqid()).'.'.$file->guessExtension();
$file->move($this->getParameter('event_directory'), $filename);
$title = $form['title']->getData();
$description = $form['description']->getData();
$date = $form['date']->getData();
$members->setImagePath($filename);
$members->setTitle($title);
$members->setDescription($description);
$members->setDate($date);
$em = $this->getDoctrine()->getManager();
$em->persist($members);
$em->flush();
$this->addFlash(
'notice', 'Event Added!!'
);
}
}
return new JsonResponse("This is Ajax");
}
Я несколько раз удалял кеш, но не работал. Точный код работает в Localhost.