faceanalysis.html

<html>
<head>
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
    <input type="file" id="filename" name="filename"/>
    <button id="btnclick">Analyze Image</button>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#btnclick').click(function(){
                   var apiKey = "aee47afa91fe4130b011d16dbf4e3789";
                    var file = document.getElementById('filename').files[0];
                    
                    var apiUrl = "https://api.projectoxford.ai/vision/v1.0/analyze?visualFeatures=Description&language=en";
                    var params = {
                        // Request parameters
                        "visualFeatures": "Tags",
                        "language": "en",
                    };
              
                $.ajax({
                             url: apiUrl,
                             beforeSend: function (xhrObj) {
                                 xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
                                 xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", apiKey);
                             },
                             type: "POST",
                             data: file,
                             processData: false
                         })
                         .done(function (response) {
                            //ProcessResult(response);
                            console.log(response);
                         })
                         .fail(function (error) {
                            //debugger;
                            //console.log(error.getAllResponseHeaders());
                            console.log(JSON.parse(error.responseText).message);
                        });
                })
            });
        </script>
</body>
</html>