Ajax upload Image

J'essaie de télécharger de l'image en utilisant ajax sur le changement de nom d'image du fichier, mais je ne peux pas obtenir $_FILES["InputUploadFileImage"]["tmp_name"]; Du côté du serveur, mon code.

Code JQuery

  $('#InputUploadFileImage').change(function() { var FilePath = $('#InputUploadFileImage').val(); var FileSize = this.files[0].size; $.ajax({ type: "POST", async: true, dataType: "json", url: ajaxurl, data: ({ type: "POST", action: 'Ajax_ChangingProfileImage', FilePath: FilePath, FileSize: FileSize }), success: function (response) { if (response.Message === 'ImageSuccessfullyUploaded') { alert('Image Successfully Uploaded.'); $('#imgUserImage').image_src = FilePath; console.log(response.FilePath); } else { alert('Image was not uploaded successfully.'); $('#imgUserImage').image_src = FilePath; console.log(response.FilePath); } }, error: function (jqXHR, textStatus, errorThrown) { console.log(jqXHR); console.log(textStatus); console.log(errorThrown); } }); });

Code PHP

 function Ajax_ChangingProfileImage() { $FileTmpPath = $_FILES["InputUploadFileImage"]["tmp_name"]; $FileSize = $_POST['FileSize']; $FilePath = $_SERVER['DOCUMENT_ROOT'] . "restronaut/wp-content/uploads/UsersImages/1.jpg"; $IsUploaded = move_uploaded_file($FileTmpPath ,$FilePath); if ($IsUploaded) { $response['Message'] = 'ImageSuccessfullyUploaded'; $response['FilePath'] = $FilePath; } else { $response['Message'] = 'ImageNotSuccessfullyUploaded'; $response['FilePath'] = $FilePath; } header('Content-Type: application/json'); echo json_encode($response); die(); }

S'il vous plaît, aidez-nous et beaucoup d'avance à l'avance …

Vous devez utiliser le nouveau formulaireData () pour envoyer de l'image à l'aide d'un appel ajax. Ceci est égal à la définition d'un type enctype sous une forme régulière (sans ajax)

Pour plus d'informations sur l'objet formulaireData, voici un lien MDN pour vous.

Code JQuery

 $('#InputUploadFileImage').change(function() { /*var FilePath = this.files[0]; var FileSize = this.files[0].size; var file = this.files[0]; var name = FilePath.name; var type = FilePath.type;*/ var formData = new FormData($('*formId*')[0]); $.ajax({ type: "POST", async: true, dataType: "json", url: ajaxurl, data: ({ type: "POST", action: 'Ajax_ChangingProfileImage', formData : formData }), success: function (response) { if (response.Message === 'ImageSuccessfullyUploaded') { alert('Image Successfully Uploaded.'); $('#imgUserImage').image_src = FilePath; console.log(response.FilePath); } else { alert('Image was not uploaded successfully.'); $('#imgUserImage').image_src = FilePath; console.log(response.FilePath); } }, error: function (jqXHR, textStatus, errorThrown) { console.log(jqXHR); console.log(textStatus); console.log(errorThrown); } }); });

Code PHP

 print_r($_FILES);

Je crains que vous ne puissiez pas récupérer la valeur d'une boîte de téléchargement de fichiers via JavaScript. Par conséquent, vous ne pouvez pas soumettre un téléchargement de fichier via Ajax de la même manière que les données textuelles standard.

Au lieu de cela, vous devez utiliser l'objet FormData de JavaScript pour envelopper le fichier dans un objet de multipart/form-data post multipart/form-data . Reportez-vous à la réponse acceptée dans cette question StackOverflow:

Télécharger le fichier avec Ajax XmlHttpRequest

FormData que l'API FormData n'est pas prise en charge par Internet Explorer 9-.