如何在symfony3中使用ajax jquery上传文件
问题描述:
嘿,大家好,我在symfony3中使用ajax上传文件时遇到问题我检测到没有提交或用ajax,jquery点击文件的事件,但是我没有任何东西在方法控制器中获取请求总是空如何在symfony3中使用ajax jquery上传文件
第一的console.log(file_data)返回
File {name: "pawandeep.jpg", lastModified: 1489747066000, lastModifiedDate: Fri Mar 17 2017 11:37:46 GMT+0100 (Paris, Madrid), webkitRelativePath: "", size: 30970…}
最后的console.log(数据)返回NULL!
<form method="post" action="#" id = "myForm" enctype="multipart/form-data" >
<div id="mybutton">
<input type="file" id="myfile" name="upload"/>
Click Me!
</div>
</form>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>
<script>
$(document).ready(function() {
$('.progress').hide();
$('#myfile').change(function(evt) {
/*srcPhoto = $(this).val();*/
$('.progress').show();
var file_data = $("#myfile").prop("files")[0];
console.log(file_data);
var form_data = new FormData(file_data); // Creating object of FormData class
/*form_data.append("file", file_data)*/
/*form_data.append("id", "{{ doctor.id }}")*/
if(file_data != ""){
$.ajax({
url: "{{ path('bonjou', {'id':doctor.id}) }}", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData: false, // To send DOMDocument or non processed data file it is set to false
mimeType: "multipart/form-data",
dataType:"json",
success: function (data) // A function to be called if request succeeds
{
$(".progress").hide();
console.log(data);
$(".photoDoctor").attr("src", data.name);
}
});
};
});
});
</script>
文件生根
bonjou:
path: /akrem/{id}
defaults: { _controller: DoctorsAdminBundle:Doctor:akrem }
方法控制
public function akremAction(Request $request, $id)
{
$em = $this->getDoctrine()->getManager();
$doctor = $em->getRepository('DoctorsAdminBundle:Doctor')->find($id);
$file = $request->files->get('upload');
$countryArray = array(
'file'=>$file
);
return new \Symfony\Component\HttpFoundation\JsonResponse($countryArray);
}
答
更改脚本
<script>
$(document).ready(function() {
$('.progress').hide();
$('#myfile').change(function(evt) {
/*srcPhoto = $(this).val();*/
$('.progress').show();
var file_data = $("form")[0];
console.log(file_data);
var form_data = new FormData(file_data); // Creating object of FormData class
/*form_data.append("file", file_data)*/
/*form_data.append("id", "{{ doctor.id }}")*/
if(file_data != ""){
$.ajax({
url: "{{ path('bonjou', {'id':doctor.id}) }}", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData: false, // To send DOMDocument or non processed data file it is set to false
mimeType: "multipart/form-data",
dataType:"json",
success: function (data) // A function to be called if request succeeds
{
$(".progress").hide();
console.log(data);
$(".photoDoctor").attr("src", data.name);
}
});
};
});
});
答
function SubmitForm() {
var data = $("#policyForm").serialize();
var url = "/Policies/NewPolicy"
var form = $('#policyForm')[0]
var formdata = false;
if (window.FormData) {
formdata = new FormData(form);
}
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: formdata ? formdata : data,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (data) {//Your successcode}
+0
我得到了这个结果{“files”:[]} –
答
我想给你的答案,它工作正常我享受!
树枝视图
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
{#<button type="button" id="mybutton" class="updatePhotoDoctor btn btn-default arabe">تعديل</button>#}
{{ form_start(editPicForm, {"attr":{"id":"akrem"}}) }}
<div class="form-group">
{#Génération du label. #}
{{ form_label(editPicForm.photoDoctor, "صورة الطبيب", {'label_attr': {'class': 'arabe control-label'}}) }}
{#Affichage des erreurs pour ce champ précis.#}
{{ form_errors(editPicForm.photoDoctor) }}
{#Génération de l'input.#}
{{ form_widget(editPicForm.photoDoctor, {'attr': {'class': 'arabe'}}) }}
</div>
{#<div class="form-group">
Génération du label.
{{ form_label(editPicForm.password, "كلمة المرور", {'label_attr': {'class': 'arabe control-label'}}) }}
Affichage des erreurs pour ce champ précis.
{{ form_errors(editPicForm.passwordDoctor) }}
Génération de l'input.
{{ form_widget(editPicForm.passwordDoctor, {'attr': {'class': 'arabe'}}) }}
</div>#}
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" style="width: 100%"></div>
</div>
<input type="submit" value="تعديل"/>
{{ form_end(editPicForm) }}
</div>
脚本AJAX
<script>
$(document).ready(function() {
$('.progress').hide();
$('#akrem').on("submit", function (event) {
event.preventDefault();
$('.progress').show();
$.ajax({
type: 'POST',
url: "{{ path('doctors_admin_editPhotoDoctor', {'id':doctor.id}) }}",
data: new FormData($(this)[0]),
dataType: 'json',
processData: false,
cache: false,
contentType: false,
success: function (response) {
console.log(response.photo);
$('#doctorPic').attr('src', '{{ asset('uploads/doctors/') }}' + response.photo);
$('.doctorPic').attr('src', '{{ asset('uploads/doctors/') }}' + response.photo);
/*alert(response.message);
console.log(response);*/
$('.progress').hide();
},
error: function (response, desc, err) {
if (response.responseJSON && response.responseJSON.message) {
alert(response.responseJSON.message);
}
else {
alert(desc);
}
}
});
});
});
</script>
路由
doctors_admin_editPhotoDoctor:
path: /editPhotoDoctor/{id}
defaults: { _controller: DoctorsAdminBundle:Doctor:editPhotoDoctor }
requirements:
id: \d
控制器
public function editPhotoDoctorAction(Request $request, Doctor $doctor)
{
$editPictureForm = $this->createForm('Doctors\AdminBundle\Form\EditPictureDoctorType', $doctor);
$editForm = $this->createForm('Doctors\AdminBundle\Form\EditDoctorType', $doctor);
$editPictureForm->handleRequest($request);
if ($editPictureForm->isSubmitted()) {
$file = $doctor->getPhotoDoctor();
$doctor->setPhotoDoctor($file); // Store the current value from the DB before overwriting below
/*if ($file instanceof UploadedFile) {*/
$fileName = md5(uniqid()).'.'.$file->guessExtension();
$file->move(
$this->getParameter('photoDoctor_directory'),
$fileName
);
$doctor->setPhotoDoctor($fileName);
/*}*/
$this->getDoctrine()->getManager()->flush();
if ($request->isXmlHttpRequest()) {
return new JsonResponse(array('message' => 'Success!','success' => true, 'photo'=>$doctor->getPhotoDoctor()), 200);
}
$session = $request->getSession();
$session->getFlashBag()->add('msg', 'تم تعديل معلومات الطبيب بنجاح');
return $this->redirectToRoute('doctors_admin_doctors');
}
/*var_dump($editForm->getErrors());*/
return $this->render('DoctorsAdminBundle:Doctor:editDoctor.html.twig', array(
'doctor' =>$doctor,
'edit_form' =>$editForm->createView(),
'editPicForm'=>$editPictureForm->createView(),
));
}
无第一个console.log(file_data)返回undefined !! –
你正在尝试传递文件individualy nstead尝试通过整个表单,它会得到你的结果 –
虐待示例 –