Javascript 实施微软&x27；s牛津项目-情感API和文件上传_Javascript_Html_Ajax_Windows_Microsoft Cognitive

Javascript 实施微软&x27；s牛津项目-情感API和文件上传

javascript html ajax windows

Javascript 实施微软&x27；s牛津项目-情感API和文件上传,javascript,html,ajax,windows,microsoft-cognitive,Javascript,Html,Ajax,Windows,Microsoft Cognitive,我希望能够在我的网站上实现牛津项目的情感API。我目前编写了以下HTML/JavaScript代码，用于检查URL中的图像，并在运行情感API后显示所述图像的结果： <head> <title>JSSample</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <body&g

我希望能够在我的网站上实现牛津项目的情感API。我目前编写了以下HTML/JavaScript代码，用于检查URL中的图像，并在运行情感API后显示所述图像的结果：

<head>
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body>
<script type="text/javascript">
$(function() {
  $.ajax({
      url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
      beforeSend: function(xhrObj) {
        // Request headers
        xhrObj.setRequestHeader("Content-Type", "application/json");
        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "my-key");
      },
      type: "POST",
      // Request body
      data: '{"url": "https://philosophybank.files.wordpress.com/2013/08/happy-people.jpg"}',
    })
    .done(function(data) {
    JSON.stringify(data);
      alert(JSON.stringify(data));
      //console.log(data);
      //alert(data.scores);
    })
    .fail(function(error) {
      console.log(error.getAllResponseHeaders());

      alert("fail");
    });
});

</script>


JSSample
$（函数（）{
$.ajax({
url:“https://api.projectoxford.ai/emotion/v1.0/recognize",
发送前：函数（xhrObj）{
//请求头
setRequestHeader（“内容类型”、“应用程序/json”）；
setRequestHeader（“Ocp Apim订阅密钥”、“我的密钥”）；
},
类型：“POST”，
//请求主体
数据：“{”url:”https://philosophybank.files.wordpress.com/2013/08/happy-people.jpg"}',
})
.完成（功能（数据）{
stringify（数据）；
警报（JSON.stringify（数据））；
//控制台日志（数据）；
//警报（数据、分数）；
})
.失败（功能（错误）{
log（error.getAllResponseHeaders（））；
警报（“失败”）；
});
});

这段代码运行得很好，但是我希望在我的网站上实现这一点，这样人们就可以使用浏览按钮从自己的机器本地上传图像，而不是使用链接查找图像。任何帮助都将不胜感激

我使用

application/octet-stream

作为主体类型模拟了这一点，它允许您发布二进制对象（即图像本身），而不是图像的url。详细说明这是如何成为受支持的内容类型的

我按照您最初的示例继续使用JQuery

您应该能够将整个示例复制并粘贴到HTML文件中，在显示

my key

的位置添加您的情感API键，这样就可以了

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
    <input type="file" id="file" name="filename">
    <button id="btn">Click here</button>

    <script type="text/javascript">
        $('#btn').click(function () {

            var file = document.getElementById('file').files[0];

            $.ajax({
                    url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
                    beforeSend: function(xhrObj) {
                        // Request headers
                        xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
                        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "my-key");
                    },
                    type: "POST",
                    data: file,
                    processData: false
                })
                .done(function(data) {
                    JSON.stringify(data);
                    alert(JSON.stringify(data));
                })
                .fail(function(error) {
                    alert(error.getAllResponseHeaders());
                });
        });
    </script>
</body>

</html>


点击这里
$（'#btn'）。单击（函数（）{
var file=document.getElementById（'file'）.files[0]；
$.ajax({
url:“https://api.projectoxford.ai/emotion/v1.0/recognize",
发送前：函数（xhrObj）{
//请求头
setRequestHeader（“内容类型”、“应用程序/八位字节流”）；
setRequestHeader（“Ocp Apim订阅密钥”、“我的密钥”）；
},
类型：“POST”，
数据：文件，
processData:false
})
.完成（功能（数据）{
stringify（数据）；
警报（JSON.stringify（数据））；
})
.失败（功能（错误）{
警报（error.getAllResponseHeaders（））；
});
});

我使用

应用程序/octet-stream

作为主体类型模拟了这一点，它允许您发布二进制对象（即图像本身），而不是图像的url。详细说明这是如何成为受支持的内容类型的

我按照您最初的示例继续使用JQuery

您应该能够将整个示例复制并粘贴到HTML文件中，在显示

my key

的位置添加您的情感API键，这样就可以了

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
    <input type="file" id="file" name="filename">
    <button id="btn">Click here</button>

    <script type="text/javascript">
        $('#btn').click(function () {

            var file = document.getElementById('file').files[0];

            $.ajax({
                    url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
                    beforeSend: function(xhrObj) {
                        // Request headers
                        xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
                        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "my-key");
                    },
                    type: "POST",
                    data: file,
                    processData: false
                })
                .done(function(data) {
                    JSON.stringify(data);
                    alert(JSON.stringify(data));
                })
                .fail(function(error) {
                    alert(error.getAllResponseHeaders());
                });
        });
    </script>
</body>

</html>


点击这里
$（'#btn'）。单击（函数（）{
var file=document.getElementById（'file'）.files[0]；
$.ajax({
url:“https://api.projectoxford.ai/emotion/v1.0/recognize",
发送前：函数（xhrObj）{
//请求头
setRequestHeader（“内容类型”、“应用程序/八位字节流”）；
setRequestHeader（“Ocp Apim订阅密钥”、“我的密钥”）；
},
类型：“POST”，
数据：文件，
processData:false
})
.完成（功能（数据）{
stringify（数据）；
警报（JSON.stringify（数据））；
})
.失败（功能（错误）{
警报（error.getAllResponseHeaders（））；
});
});

我已经看过了[API文档][1]，它的主体看起来可以发布为

application/json

或

application/octet-stream

。如果将主体作为八位字节流发布，则可以直接将二进制对象（图像）发布到api。如果我不厌其烦地为你模拟这篇文章并更新这篇文章，你会把它作为一个答案吗？（如果它有效的话）[1]：嗨，听起来你是对的，只是快速看了一下这个！如果你能帮我解决这个问题，那将是非常有帮助的！我是JavaScript和API新手，非常感谢您的帮助。我确实会把它标记为一个答案，因为这正是我所寻找的。谢谢你的帮助！好的，我会在第二天左右试着模拟一些东西。你想用纯Javascript还是使用ASP.Net？太好了，谢谢！JavaScript将是完美的，因为这样我就可以在我现有的HTML网站上编写它了。谢谢我已经看过了[API文档][1]，它的主体可以发布为

application/json

或

application/octet-stream