Comment télécharger une image sur Amazon AWS (S3) à l’aide de Ajax et Jquery dans Rails?

Je veux que l’utilisateur télécharge son image depuis le site. J’ai fait la plupart des choses mais maintenant, je rencontre des difficultés lors du téléchargement de l’image sur le serveur. Comment résoudre ce problème?

HTML –

 
 
  ">  
 
 X 
 
  
Delete
   
Cancel
  
 
   
 Upload Here
Qu’est-ce qui fait que VueJS arrête de mettre à jour le DOM dans cette instance?
Rails – exécuter un appel ajax via le menu déroulant sélectionné
jQuery ajax, obtenez les noms de domaine html
Erreur CORS – Une demande Ajax renvoie des échecs intermittents avec l’API NYTimes
Échec Ajax intentionnel ASP.NET MVC
  
 <input type="hidden" name="user_id1_key" value=""/>  
 
 
 
    

Café Script –

 $ -> if $('#target1 img').length == 1 $('#file_browser1').addClass 'none' $('#close1').addClass 'delete1' $('#closebtn1').on 'click', (e) -> $('#closemsg1').addClass 'msg1' $('#cancelbtn1').click -> $('#closemsg1').removeClass 'msg1' $('#deletebtn1').click -> $('#close1').removeClass 'delete1' $('#closemsg1').removeClass 'msg1' $('#target1 > img').hide() $('#file_browser1').removeClass 'none' $('#file-upload1').val('') return $('#file-upload1').on 'change', (event) -> files = event.target.files image = files[0] console.log image.size reader = new FileReader $.ajax({ type: "GET", url: "http://localhost:3000/users/get_url/13", success :(data) -> console.log data[0].url $.ajax({ url: data[0].url, type: 'PUT', xhr: -> myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) myXhr.upload.addEventListener('progress', progressHandlingFunction, false); return myXhr; , success: (data) -> alert "abcd", error: (data) -> alert data[0], data: $('#file-upload1')[0].files[0], cache: $.param(false), contentType: "binary/octet-stream", processData: $.param(false) }, 'json'); }) reader.onload = (file) -> img = new Image img.src = file.target.result $('#target1').html img $('#file_browser1').addClass 'none' $('#close1').addClass 'delete1' $('#closebtn1').on 'click', (e) -> $('#closemsg1').addClass 'msg1' $('#cancelbtn1').click -> $('#closemsg1').removeClass 'msg1' $('#deletebtn1').click -> $('#close1').removeClass 'delete1' $('#closemsg1').removeClass 'msg1' $('#target1 > img').hide() $('#file_browser1').removeClass 'none' $('#file-upload1').val('') return return reader.readAsDataURL image console.log files return 

PS – J’ai utilisé Json pour obtenir l’URL de l’adresse AWS-URL et l’image doit être téléchargée de manière asynchrone dès que le fichier est sélectionné dans le navigateur, car aucun bouton de téléchargement n’est disponible.

• Chargement de l’animation à l’aide de jQuery pour afficher à l’intérieur d’un div particulier
• Afficher le chargement modal div n’est pas en cours d’exécution dans les navigateurs Google Chrome et IE, Firefox est ok
• Afficher le SVG en ligne dans IE8
• PHP pour lire la valeur de la firebase database, JS pour l’incrémenter, AJAX pour enregistrer dans la firebase database, mais pourquoi at-il la valeur par défaut de 0,0 avant d’actualiser la page?
• Passer un tableau via jQuerys $ .post réduit les positions