使用 jquery 将本地 mp3 文件发送到 api 服务器

Question

我希望使用 echoprint - http://echoprint.me/start - 它允许我在发布请求中从我的计算机本地发送一个 mp3 文件，并从他们的服务器返回一个包含歌曲详细信息的 json 对象。

我正在尝试使用 jquery 发出此帖子请求，以便我检索包含歌曲详细信息的 json 对象，然后我可以在浏览器的控制台中查看它。

echoprint 网站 - http://developer.echonest.com/docs/v4/track.html - 解释了如何使用 curl 发出此帖子请求。以下代码在命令行中工作。这将返回一个 json 对象，但它会在终端中返回。

curl -F "api_key=#############" -F "filetype=mp3" -F "track=@tambourineMan.mp3" "http://developer.echonest.com/api/v4/track/upload"

我已阅读 curl 文档 http://curl.haxx.se/docs/httpscripting.html#POST 以尝试了解 curl 和 jquery 之间存在的相关性，但不幸的是，我很难将两者联系起来并理解 -F 的含义。

我的目标是使用 jquery 发出这个 post 请求，这样我就可以发出与上面使用 curl 概述的相同的请求，并在浏览器的控制台中检索 json 数据。

从我在这里提出的上一个问题中，我尝试采用该答案中的逻辑并使用以下代码，但是这会返回文件无法编码的错误。我已经尝试过指定内容类型和不指定内容类型，但两种方法都失败了。

   $.post("http://developer.echonest.com/api/v4/track/upload", {
              "api_key":"##################",
              "track":"@tambourineMan.mp3",
              "filetype":"mp3",
              "contentType:" "application/octet-stream"
          },
          function( data ) {
                  console.log(data)
          },
          "JSON" );

这里有说明http://developer.echonest.com/docs/v4/track.html，但它们只解释了如何使用 curl 执行此操作。如果有人能对此有所了解，将不胜感激。提前原谅我的无知。

Answer 1

cURL 使用 @ 前缀表示“命名文件的内容”，在您的 AJAX 请求中，您将 @tambourineMan.mp3 作为文字字符串发送。

完成任务的一种简单方法是在文档中放置一个文件输入，并告诉 jQuery 使用该文件中的数据：

var file = document.getElementById('myFileInput').files[0];
$.post("http://developer.echonest.com/api/v4/track/upload", {
    "api_key":"##################",
    "track":file,
    "filetype":"mp3",
    "contentType:" "application/octet-stream"
});

查看FileReader API 和this 关于在XMLHttpRequest 中发送和接收二进制数据的文章