[英]How to send an image to Symfony Controller using AJAX?
I have sent cropped images to Symfony controllers with AJAX using Symfony 3, however I can't achieve the same using Symfony 4 webpack. 我已经使用Symfony 3使用AJAX将裁剪后的图像发送到Symfony控制器,但是使用Symfony 4 Webpack无法实现相同的效果。 I achieved it previously using the
on('change')
method, however that, along with on('click)
and on('submit')
don't seem to work. 我以前使用
on('change')
方法实现了它,但是,与on('click)
和on('submit')
似乎不起作用。
My code is below: 我的代码如下:
JavaScript app.js JavaScript app.js
Routing.setRoutingData(Routes)
var routeUrl = Routing.generate('getImage');
.....................
$('#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: routeUrl,
method: 'POST',
data: formdata,
contentType: false,
cache: false,
processData:false,
headers: {'X-Requested-With':'XMLHttpRequest'},
success: function(data){
$("#previewImg").attr('src', getResponse);
}
});
});
Symfony Controller Symfony控制器
/**
* @Route("/getImage", name="getImage", methods={"POST"}, options={"expose"=true})
* @param Request $request
* @return JsonResponse
* @Cache(vary={"X-Requested-With"})
*/
public function gteImageAjax(Request $request){
if($request->isXmlHttpRequest()){
$event = new Members();
$form = $this->createForm(EventType::class, $event);
$form->handleRequest($request);
/** @var Symfony\Component\HttpFoundation\File\UploadedFile $file */
// $file = $request->get('image');
$file = $request->files->get('image_path');
// $file = new UploadedFile($file['tmp_name'], $file['name'], $file['type']);
$filename = md5(uniqid()).'.'.$file->guessExtension();
$file->move($this->getParameter('image_directory'), $filename);
$event->setImage($filename);
$em = $this->getDoctrine()->getManager();
$em->persist($event);
$em->flush();
return $this->redirectToRoute('createEvent');
}
return new JsonResponse("This is not Ajax");
}
To clarify I want to send the cropped image to my symfony controller using AJAX. 为了澄清,我想使用AJAX将裁剪后的图像发送到我的symfony控制器。 Any help will be appreciated.
任何帮助将不胜感激。
Give your form to FormData, specifying the data or not 将表单交给FormData,指定是否指定数据
// whole form
let formData: new FormData($(form)[0]);
//specifying
var formData = new FormData();
formData.append('category', 'general');
// file
var blob = $('input[type=file]')[0].files[0]);
formData.append('image_path', blob);
//send the request via AJax
$.ajax({
url: routeUrl,
data: formData,
type: 'POST',
contentType: false, // requires jQuery 1.6+
processData: false, // required
cache: false,
success: function(data){
$("#previewImg").attr('src', getResponse);
}
});
You're doing good, just check your var formData in your ajax request, you are declaring formData and sending formdata 您做得很好,只需在ajax请求中检查var formData,就可以声明formData并发送formdata
change this 改变这个
data: formdata,
to this 对此
data: formData,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.