普通のjavascript（jQueryはありません）でAJAX経由でフォームを送信

私はAJAXリクエストで送信したい以下のフォームを持っています。私は 'xmlhttp.open'という行をどのように進めるべきかは不明です。ビデオファイルをサードパーティのビデオホスティングサイト（APIを使用して）にアップロードしようとしていて、ファイルをアップロードするURL（ 'upload_link_secure'）を私に提供しました。誰かに助言してもらえますか？普通のjavascript（jQueryはありません）でAJAX経由でフォームを送信

私の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>

私のjavascript：あなたのactionが正しくない属性すべての

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); 

    }

出典

2016-10-08 dave

のために提供URLにXMLHttpRequest.prototype.open()のURLを設定アップロードするURLを追加する必要があります。 – adeneo

私はあなたがドキュメントに基づいてそれを完了することができると思うhttps://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open – Smile0ff

私はちょっとフォームの要素の 'アクション'属性と混同しています。私の考えは、この要素がURLにファイルを送信するということです。私はまだxmlhttp.open行でこのリクエストを複製する必要がありますか？ – dave

まず、例えば/uploadのようないくつかのエンドポイントに変更します。

ここにはサーバー側がない単純な例があります。

<button>要素の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);

出典

2016-10-08 23:02:23 Smile0ff

代替<span>要素は、#submitFile要素に取り付けclickイベントハンドラを使用します。 FormData() at XMLHttpRequest()Fileオブジェクトを<input type="file">.filesオブジェクト内に送ります。削除action属性を<form>要素で、それはもう少し複雑だけで完全な、Filelistを送信するよりもですが、基本的には引数が `その`（メソッド、URL）.openさPUT要求

<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>

出典

2016-10-08 23:05:21 guest271314

普通のjavascript（jQueryはありません）でAJAX経由でフォームを送信

答えて

関連する問題