Senden von Form über AJAX in einfachem Javascript (keine jQuery)

Ich habe das folgende Formular, das ich über eine AJAX-Anfrage senden möchte. Ich bin nicht sicher, wie in der Zeile 'xmlhttp.open' vorzugehen ist. Ich versuche, eine Videodatei auf eine Video-Hosting-Site eines Drittanbieters hochzuladen (unter Verwendung ihrer API) und sie haben mir eine URL ('upload_link_secure') zur Verfügung gestellt, zu der die Datei hochgeladen werden soll. Kann bitte jemand beraten?Senden von Form über AJAX in einfachem Javascript (keine jQuery)

mein HTML:

<form id="upload" action="'+upload_link_secure+'" method="PUT" enctype="multipart/form-data"> 
    <input type="file" id="vidInput"> 
    <button type="submit" id="submitFile" onclick="uploadMyVid(\''+upload_link_secure+'\')">Upload Video</button> 
</form>

mein javascript:

var uploadMyVid = function(upload_link_secure){ 

     var form = document.getElementById('upload') 

     // FETCH FILEIST OBJECTS 
     var vidFile = document.getElementById('vidInput').files; 

     var xmlhttp = new XMLHttpRequest; 

     xmlhttp.open('PUT',); // NOT SURE HOW TO COMPLETE THIS LINE??? 
     xmlhttp.send(vidFile); 

    }

Quelle

2016-10-08 dave

Es ist ein bisschen komplizierter ist als nur eine komplette Dateiliste zu senden, aber im Grunde sind die Argumente '.open (Methode, URL)' so Sie müssen die URL zum Hochladen hinzufügen. – adeneo

Ich denke, Sie können es anhand der Dokumentation https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open – Smile0ff

vervollständigen Ich bin ein wenig verwirrt mit dem 'Aktion' Attribut im Form-Element . Meine Gedanken sind dieses Element würde die Datei an die URL senden. Würde ich diese Anfrage noch an der xmlhttp.open-Zeile duplizieren müssen ... – dave

Zu allererst Ihre action nicht korrekt Attribut, Änderung zu einem gewissen Endpunkt wie /upload zum Beispiel.

Hier ist ein einfaches Beispiel ohne Server-Seite.

html

<form id="upload-form" action="/upload" method="POST" enctype="multipart/form-data"> 
    <input type="file" id="file"> 
    <button type="submit">Upload Video</button> 
</form>

var form = document.getElementById("upload-form"), 
    actionPath = ""; 
    formData = null; 


form.addEventListener("submit", (e) => { 
    e.preventDefault(); 

    formData = new FormData(form); 
    actionPath = form.getAttribute("action"); 

    xhr.open("POST", actionPath); 
    xhr.send(formData); 

}, false);

Quelle

2016-10-08 23:02:23 Smile0ff

Substitute <span> Element für Element <button> verwenden click Ereignishandler angebracht #submitFile Element; FormData() um XMLHttpRequest() zu senden File Objekt innerhalb <input type="file">.files Objekt; entfernen action Attribut bei <form> Element, setzen URL von XMLHttpRequest.prototype.open() zu URL für PUT Anfrage

<body> 
    <form id="upload"> 
    <input type="file" id="vidInput"> 
    <span id="submitFile" 
     style="-webkit-appearance:button;-moz-appearance:button;padding:4px;font-family:arial;font-size:12px">Upload Video</span> 
    </form> 
    <script> 
    function uploadMyVid(event) { 

     // FETCH FILEIST OBJECTS 
     var vidFile = document.getElementById('vidInput').files; 

     var xmlhttp = new XMLHttpRequest; 

     xmlhttp.open('PUT', "upload_link_secure"); 

     var data = new FormData(); 
     data.append("file", vidFile[0], vidFile[0].name); 

     xmlhttp.send(data); 

    } 

    var button = document.getElementById("submitFile"); 
    button.addEventListener("click", uploadMyVid); 
    </script> 
</body>

Quelle

2016-10-08 23:05:21 guest271314

Senden von Form über AJAX in einfachem Javascript (keine jQuery)

Antwort

Verwandte Themen