web-dev-qa-db-fra.com

Comment soumettre des données de formulaire multipart à l'aide de jquery

<form id="uploadForm" enctype="multipart/form-data" action="http://localhost:1337/ad/upload" method="post" name="uploadForm" novalidate>
    <input type="file" name="userPhoto" id="userPhoto" />
    <input type="submit" value="submit" id="uploadImage" />
</form>

C'est mon formulaire html qui accepte une image en tant que fichier inout, l'utilisateur peut sélectionner un fichier image, puis cliquer sur envoyer. Cela fonctionne mais l'url de la page en cours change en localhost: 1337/ad/upload. Je veux que la page reste à la même URL.

$("form#uploadForm").submit(function(event) {
    event.preventDefault();
    var formData = new FormData($(this)[0]);
    var posting = $.post(url, formData);

})

J'ai essayé ceci pour envoyer le formulaire en utilisant jquery mais je reçois une erreur: Uncaught Type error: Illegal Invocation

Quelles données le formulaire soumet-il lorsque le type est multipart/formdata et comment pouvons-nous obtenir ces données sur jQuery

jqueryhtmlajaxformsmultipartform-data
7
user3655266

données de processus

Par défaut, les données transmises à l'option data en tant qu'objet (techniquement, toute autre chose qu'une chaîne) seront traitées et transformées en une chaîne de requête, correspondant au type de contenu par défaut "application/x-www-form-urlencoded". . Si vous souhaitez envoyer un DOMDocument ou d'autres données non traitées, définissez cette option sur false.

Veuillez vérifier Documentation jQuery Ajax

Essayez ajax comme ça - 

var form = new FormData($("#uploadForm")[0]);
$.ajax({
        url: your_url,
        method: "POST",
        dataType: 'json',
        data: form,
        processData: false,
        contentType: false,
        success: function(result){},
        error: function(er){}
});
19
Developer

Vous pouvez donner à formData tout le formulaire pour traitement

var form = $('#uploadForm')[0]; 
// You need to use standart javascript object here
var formData = new FormData(form);

ou spécifier des données exactes pour formdata

var formData = new FormData();
formData.append('userPhoto', $('input[type=file]')[0].files[0]);
0
Rahul Patel