Блог

здравствуйте , я хочу выполнить свою панель прогресса с помощью html-запроса xhr, простой отправки с symfony 4 недостаточно

я пытаюсь выполнить html-запрос xhr для метода php с данными формы и предотвратить событие по умолчанию с помощью инструкции e.preventDefault (), но это не работает .Я не знаю, почему панель инструментов Symfony говорит мне, что все в порядке (код 200).Но я не могу получить объект входного файла с помощью php .я размещаю свой код здесь.

 var uploadForm=document.getElementById("form2"); uploadForm.addEventListener("submit", uploadFile); function uploadFile(e) {  e.preventDefault();  var inputFile=document.getElementById("user_file").files[0];  let uploadDataForm = new FormData();  uploadDataForm.append('file',inputFile);  for (var value of uploadDataForm.values()) {  console.log(value);  }  try {  const xhr = new XMLHttpRequest();  xhr.open('POST', '/');  xhr.upload.addEventListener('progress', e =gt; {  const percent = e.lengthComputable ? (e.loaded / e.total) * 100 : 0;  progressBarFill.width = percent.toFixed(2)  progressBarText.textContent=percent.toFixed(2);  });  xhr.setRequestHeader("Content-Type", "multipart/form-data");  xhr.send(uploadDataForm);    }  catch (error){  console.error(error);  }      } 

 /**  * @Route("/", name="acceuil")  * @param Request $request  * @return SymfonyComponentHttpFoundationRedirectResponse|SymfonyComponentHttpFoundationResponse  */ public function index(Request $request,ProductManager $productManager) {  /** @var User $user */  $user = new User();  $file = $request-gt;query-gt;get('file');  try {  /** @var UploadedFile $task */  $task = $file;  if ($task === null) exit;  $destination = $this-gt;getParameter('files_directory');  $originalFilename = pathinfo($task-gt;getClientOriginalName(), PATHINFO_FILENAME);  $newFilename = Urlizer::urlize($originalFilename) . '-' . uniqid() . '.' . $task-gt;guessExtension();    //$fileName = md5(uniqid()).'.'.$file-gt;guessClientExtension();  $task-gt;move(  $destination,  $newFilename  // $this-gt;getParameter('files_directory'),    );  return $this-gt;redirectToRoute('acceuil');  } catch (Exception $e) {  echo $e-gt;getMessage();  }  

}

and i can’t save my input file .

 lt;div class="col-12"gt;  {{ form_start(form2,{'attr': {'id': 'form2'}}) }}  {{ form_row(form2.file,{attr:{'placeholder':'veuillez importer votre CV'}}) }}  {{ form_widget(form2) }}   lt;button type="submit" class="btn btn-primary"gt;Enregistrer!lt;/buttongt;  {{ form_end(form2) }}  lt;div class="progress-bar" id="progressBar"gt;  lt;div class="progress-bar-fill"gt;  lt;span class="progress-bar-text"gt;0lt;/spangt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  {% if fichier is defined %}  {% for fich fichier %}  lt;divgt;{{ fich }}lt;/divgt;  {% endfor %}  {% endif %} 

у меня тоже есть эта ошибка

я попробовал сегодня с технологией axios , и она снова не работает , здесь вы увидите мой код js и после php:

JS:

 $('document').ready(function () {  const axios = require('axios').default;  const progressBarFill = document.getElementsByClassName('progress-bar-fill');  const progressBarText = document.getElementsByClassName('progressBarText');  var uploadForm = document.getElementById("form2");   $('uploadForm').on('Submit', function (e) {  e.preventDefault();  var inputFile = document.getElementById("user_file").files[0];  let uploadDataForm = new FormData();  uploadDataForm.append('file', inputFile);  var config = {  onUploadProgress: function (e) {  const percent = e.lengthComputable ? (e.loaded / e.total) * 100 : 0;  progressBarText.textContent = percent.toFixed(2);  },  headers: ('X-Requested-width','XMLHttprequest')  };   axios.post('/', uploadDataForm, config).then(function (response) {   console.log(response.data);  });  }); }); // uploadForm.addEventListener("submit", uploadFile); // function uploadFile(e) { // e.preventDefault(); // var inputFile=document.getElementById("user_file").files[0]; // let uploadDataForm = new FormData(); // uploadDataForm.append('file',inputFile); // for (var value of uploadDataForm.values()) { // console.log(value); // } // var coucou = "salut"; // //uploadDataForm.append('file' ,'fichier'); // // $.ajax({ // // type: "POST", // // url: '/' , // // data: { // // uploadDataForm // // }, // // enctype: 'multipart/form-data', // // processData: false, // // contentType: false, // // error: function (error){ // // console.error(error); // // }, // // success: function(response) { // // // // } // // }); // // try { // const xhr = new XMLHttpRequest(); // xhr.open('POST', '/'); // xhr.upload.addEventListener('progress', e =gt; { // const percent = e.lengthComputable ? (e.loaded / e.total) * 100 : 0; // progressBarFill.width = percent.toFixed(2) // progressBarText.textContent=percent.toFixed(2); // }); // xhr.setRequestHeader("Content-Type", "multipart/form-data"); // xhr.send(uploadDataForm); // // // } // catch (error){ // console.error(error); // } // // // // // // } and php:   /**  * @Route("/", name="acceuil")  * @param Request $request  * @return SymfonyComponentHttpFoundationRedirectResponse|SymfonyComponentHttpFoundationResponse  */  public function index(Request $request,ProductManager $productManager)  {   /** @var User $user */  $user = new User();  $form2 = $this-gt;createForm(UserType::class, $user);  if ($request-gt;query-gt;all()) {  $file = $request-gt;query-gt;get('file');  if ($file === null) exit;  $destination = $this-gt;getParameter('files_directory');  $originalFilename = pathinfo($file-gt;getClientOriginalName(), PATHINFO_FILENAME);  $newFilename = Urlizer::urlize($originalFilename) . '-' . uniqid() . '.' . $file-gt;guessExtension();   //$fileName = md5(uniqid()).'.'.$file-gt;guessClientExtension();  $file-gt;move(  $destination,  $newFilename  // $this-gt;getParameter('files_directory'),    );  } // /** @var User $user */ // $user=new User(); // $form2 = $this-gt;createForm(UserType::class, $user); // $form2-gt;handleRequest($request); // if ($form2-gt;isSubmitted() amp;amp; $form2-gt;isValid()) { // // $form-gt;getData() holds the submitted values // // but, the original `$task` variable has also been updated // /** @var UploadedFile $task */ // $task = $form2-gt;get('file')-gt;getData(); // if($task===null) exit; // $destination = $this-gt;getParameter('files_directory'); // $originalFilename = pathinfo($task-gt;getClientOriginalName(), PATHINFO_FILENAME); // $newFilename = Urlizer::urlize($originalFilename) . '-' . uniqid() . '.' . $task-gt;guessExtension(); // // //$fileName = md5(uniqid()).'.'.$file-gt;guessClientExtension(); // $task-gt;move( // $destination, // $newFilename // // $this-gt;getParameter('files_directory'), // // // );  //}    // ... perform some action, such as saving the task to the database  // for example, if Task is a Doctrine entity, save it!  /* $entityManager = $this-gt;getDoctrine()-gt;getManager();  $entityManager-gt;persist($task);  $entityManager-gt;flush();*/     return $this-gt;render( 'acceuil/index.html.twig',[  'products' =gt; $productManager-gt;getProducts(),  'form2' =gt; $form2-gt;createView(),  'fichier'=gt;$request-gt;query-gt;all(),  'controller_name' =gt; 'AcceuilController']  );  }  

не могли бы вы мне помочь ?

я нашел решение.

 const progressBarFill = document.getElementsByClassName('progress'); const progressBarText = document.getElementsByClassName('progress-bar'); var uploadForm = document.getElementById("form2"); uploadForm.addEventListener("submit", uploadFile); function uploadFile(e) {  e.preventDefault();  var inputFile=document.getElementById("user_file").files[0];  let uploadDataForm = new FormData();  uploadDataForm.append('file',inputFile);  for (var value of uploadDataForm.values()) {  console.log(value);  }  try {  const xhr = new XMLHttpRequest();  xhr.open('POST', '/uploadAjax');  xhr.upload.addEventListener('progress', e =gt; {  const percent = e.lengthComputable ? (e.loaded / e.total) * 100 : 0;  $(".progress-bar").width(percent  '%');  $(".progress-bar").html(percent '%');  });   xhr.send(uploadDataForm);      console.log(response); }      }  catch (error){  console.error(error);  } }  

и php-код :

 /**  ** @Route("/uploadAjax", name="uploadAjax")  * @param Request $uneRequete  * @return void  */  public Function uploadAjax(Request $uneRequete){   try {  $test = 'c bon';  $req = $uneRequete;   /** @var UploadedFile $file */  $file = $uneRequete-gt;files-gt;get('file');   if ($file === null) exit;  $destination = $this-gt;getParameter('files_directory');  $originalFilename = pathinfo($file-gt;getClientOriginalName(), PATHINFO_FILENAME);  $newFilename = Urlizer::urlize($originalFilename) . '-' . uniqid() . '.' . $file-gt;guessExtension();   //$fileName = md5(uniqid()).'.'.$file-gt;guessClientExtension();  $file-gt;move(  $destination,  $newFilename   );  }  catch (Exception$e){  echo $e-gt;getMessage();  }    return $this-gt;render('acceuil/index.html.twig',['uneRequete'=gt;$req]);  } }