J'ai un <form>
pour télécharger une image et un <fieldset>
pour envoyer des données à l'aide d'AJAX, elles fonctionnent bien, mais mon problème se produit lorsque j'essaie de les fusionner sous une forme. J'utilise le serveur Node.JS.
Télécharger <form>
:
<form method="post" enctype="multipart/form-data" action="upload"> <input type="file" name="upl"/> <input type="submit" value="Send"/> </form>
Node.JS routeur upload post:
router.post('/upload', upload, function (req, res, next) { console.log(req.file); res.status(204).end(); });
<fieldset>
:
<div id="addAdv"> <fieldset class="form-group"> <label for="inputTimeStamp">Time</label> <input id="inputTimeStamp" type="text" class="form-control"/><br/> <label for="inputURL">URL</label> <input id="inputURL" type="url"/><br/> <button id="btnAddAdv" type="submit" class="btn btn-primary">Submit</button> </fieldset> </div>
Node.Js poste de données de routeur:
router.post('/addadv', function(req, res) { Feed.collection.insert(req.body, function(err, result){ res.send( (err === null) ? { msg: '' } : { msg: err } ); }); });
AJAX:
$('#btnAddAdv').on('click', addAdv); function addAdv(event) { ..... $.ajax({ type: 'POST', data: newUser, url: '/addadv', dataType: 'JSON' }).done(function( response )...}
Essayons de les fusionner:
<div id="addAdv"> <form method="post" enctype="multipart/form-data" action="upload"> <fieldset class="form-group"> <input type="file" name="upl"/> <label for="inputTimeStamp">Time</label> <input id="inputTimeStamp" type="text" class="form-control"/><br/> <label for="inputURL">URL</label> <input id="inputURL" type="url"/><br/> <input type="submit" id="btnAddAdv" value="Send"/> </fieldset> </form> </div>
A également essayé:
<button id="btnAddAdv" type="submit">Send</button>
Si vous soumettez votre formulaire fusionné via le bouton de soumission et non via XHR, vous devez ajouter des attributs de name
pour vos champs non-fichiers, sinon le navigateur ne les enverra pas au serveur.