从Javascript上传文件 [英] Upload file from Javascript

问题描述

我正在开发 Javascript 应用程序，我需要使用 Mediafire REST API 上传文件。 （请参阅，首先发送一个OPTIONS请求。这也被称为预检请求，在您的情况下，由于包含非标准头（x-filesize）以及Content-Type不是表单编码，MPE或文本/纯。您可以处理OPTIONS请求服务器端，或者对您的请求进行适当的更改，以便不需要预检。无论哪种方式，你将不得不处理CORS请求服务器端，因为你显然是跨域请求。你可以阅读更多关于CORS在这个优秀的MDN文章。

PS你为什么在这里使用FileReader？只需通过XHR发送File对象，或者，更好的方法是将文件附加到FormData对象并发送。

I'm developing a Javascript app and I need to use the Mediafire REST API to upload a file. (See upload ducmentation here).

Following this MDN tutorial, and some research, I've written the code below, but it seems it's not working... Note that I don't need for the moment to control the progress and so on, I only want to do the most basic upload operation possible...

Also note that I could a different code, and even jQuery or other (free) libraries, so if you have a better code to upload a file I'd be really grateful...

var controller = this;
var file = $("#file").get(0).files[0];
//The file is correctly retrieved here...

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.mediafire.com/api/upload/upload.php?session_token=' + controller.sessionToken.token);
//(The session_token is valid)
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.setRequestHeader('x-filesize', file.size);

var reader = new FileReader();
reader.onload = function (evt) {
  var uInt8Array = new Uint8Array(evt.target.result);
  //It seems that here the ArrayBuffer is read correctly, 
  //and I converted it to a ArrayBufferView because Chrome suggested it...
  xhr.send(uInt8Array);
};
reader.readAsArrayBuffer(file);

I can't tell the concrete error, I only know that nothing is happens... but maybe looking at the code you can see some obvious error... The only thing I see is this in Chrome's console:

Note: I know the quality of this question is not the desired and it's TOO vague, but I tried to do my best taking into account that I'm completely new to ALL these technologies...

解决方案

The presence of an OPTIONS request and the presence of specific headers in the OPTIONS request indicates that your POST request is a cross-domain request. The user agent, following the CORS spec, is first sending an OPTIONS request. This is also called a preflight request, and it is sent, in your case, due to the non-standard header you are including (x-filesize) and the fact that the Content-Type is not form-encoded, MPE, or text/plain. You can either deal with the OPTIONS request server-side, or make appropriate changes to your request so that a preflight is not required. Either way, you are going to have to deal with CORS requests server-side since you are apparently making a cross-domain request. You can read more about CORS in this excellent MDN article.

P.S. Why are you using FileReader here? Just send the File object via XHR, or, better yet, append the File to a FormData object and send that.

这篇关于从Javascript上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！