因此,我最近看到了一个教程,并在网站上创建了图像裁剪和上传功能。就我而言,我有:-
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中使用。