Publication d'un formulaire multipart vers une URL externe php

Question

Dans ma page, j'ai un formulaire pour télécharger des photos sur un service externe qui fournit une API, upload.im, et j'ai besoin de récupérer l'URL où l'image a été téléchargée. Je ne peux vraiment pas faire fonctionner ceci ...

La page de documentation pour cette API est here.

J'ai ajouté un formulaire à ma page PHP:

<form enctype="multipart/form-data" name="UploadForm" id="UploadForm" action="http://uploads.im/api" method="POST"> 
    <input type="hidden" name="MAX_FILE_SIZE" value="30000" /> 
    <input type="file" name="upload" id="upload" /> 
    <input type="hidden" name="resize_width" id="resize_width" value="" /> 
    <input type="hidden" name="thumb_width" id="thumb_width" value="250" /> 
    <input type="hidden" name="format" id="format" value="xml" /> 
    <input type="submit" id="Submit" name="Submit" /> 
</form> 

J'ai aussi essayé d'utiliser ce code jQuery pour soumettre le formulaire avec l'image sélectionnée:

$(document).ready(function() { 
    $('#UploadForm').on('submit', function(e) { 
     e.preventDefault(); 
     var data = new FormData(jQuery('UploadForm')[0]); 
     jQuery.ajax({ 
      url: 'http://uploads.im/api', 
      data: data, 
      cache: false, 
      contentType: false, 
      processData: false, 
      type: 'POST', 
      success: function(data){ 
       console.log(data); 
      } 
     }); 
    }); 
}); 

Avec ce code, je reçois l'erreur dans la console: screen.png http://i68.tinypic.com/zmnyq8.png Quel est le code d'erreur de l'API; cela signifie que le code fonctionne, mais quelque chose dans la façon dont le formulaire est soumis est faux. Où est le problème?

Merci!

Answer 1

Ici, je viens de faire quelques changements dans le code JS:

$(document).ready(function() { 
    $('#UploadForm').on('submit', function(e) { 
     e.preventDefault(); 
     var data = new FormData($(this)); 
     data.append('upload', $('#upload')[0].files[0]); 

     jQuery.ajax({ 
      url: 'http://uploads.im/api', 
      data: data, 
      cache: false, 
      contentType: false, 
      processData: false, 
      type: 'POST', 
      success: function(data){ 
       console.log(data); 
       console.log(data.data.thumb_url); 
       console.log(data.data.img_url); 
      } 
     }); 
    }); 
}); 

Answer 2

Le problème est peut-être à voir avec cette ligne:

var data = new FormData(jQuery('UploadForm')[0]); 

Il devrait être #UploadForm.

Answer 3

Essayez comme ci-dessous.

var data = new FormData($('#UploadForm')); 

passer le nœud à FormData Constructor: Le constructeur FormData() crée un nouveau FormData objet

Paramètre: Un élément HTML <form> - lorsque cela est spécifié, l'objet FormData sera rempli avec les touches actuelles du formulaire /valeurs. Il encodera également le contenu d'entrée de fichier.

Référez: https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData