admin管理员组文章数量:1330673
I have the following Form which I would like to send via an AJAX request. I am unsure how to proceed in the line 'xmlhttp.open'. I am trying to upload a video file to a third party video hosting site (using their API)and they have provided me with a URL ('upload_link_secure')to upload the file to. Please can someone advise?
my 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>
my 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);
}
I have the following Form which I would like to send via an AJAX request. I am unsure how to proceed in the line 'xmlhttp.open'. I am trying to upload a video file to a third party video hosting site (using their API)and they have provided me with a URL ('upload_link_secure')to upload the file to. Please can someone advise?
my 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>
my 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);
}
Share
Improve this question
edited Oct 8, 2016 at 22:32
dave
asked Oct 8, 2016 at 22:05
davedave
4756 silver badges20 bronze badges
9
-
It's a bit more plicated than just sending a plete fileList, but basically the arguments are
.open(method, url)
so you have to add the URL to upload to. – adeneo Commented Oct 8, 2016 at 22:10 - i think you can plete it based on documentation developer.mozilla/en-US/docs/Web/API/XMLHttpRequest/open – Smile0ff Commented Oct 8, 2016 at 22:12
- i'm a little confused with the 'action' attribute in the Form element. My thoughts are this element would send the file to the url. Would i still need to duplicate this request at the xmlhttp.open line... – dave Commented Oct 8, 2016 at 22:12
- if you make sync request you don't need to specify action url, but in your case, you did async request, so XHR don't know anything about your endpoint, yes you need to set it explicitly – Smile0ff Commented Oct 8, 2016 at 22:15
-
Are you trying to send the files using
<form>
orXMLHttpRequest()
? – guest271314 Commented Oct 8, 2016 at 22:25
2 Answers
Reset to default 6First of all your action
attribute not correct, change to some endpoint like /upload
for example.
Here is a simple example without server side.
var form = document.getElementById("upload-form"),
actionPath = "";
formData = null;
var xhr = new XMLHttpRequest();
form.addEventListener("submit", (e) => {
e.preventDefault();
formData = new FormData(form);
actionPath = form.getAttribute("action");
xhr.open("POST", actionPath);
xhr.send(formData);
}, false);
<form id="upload-form" action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" id="file">
<button type="submit">Upload Video</button>
</form>
Substitute <span>
element for <button>
element, use click
event handler attached to #submitFile
element; FormData()
at XMLHttpRequest()
to send File
object within <input type="file">
.files
object; remove action
attribute at <form>
element, set URL
of XMLHttpRequest.prototype.open()
to URL
provided for PUT
request
<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>
本文标签: Sending Form via AJAX in plain javascript (no jQuery)Stack Overflow
版权声明:本文标题:Sending Form via AJAX in plain javascript (no jQuery) - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742235322a2437972.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论