Here is a sample reference on how to invoke Alchemy Face Detection service using JQUERY. The details were not available on the website, so I decided to build one quickly. I would use this only for quick experimentation as it exposes the client key on the browser side.
Here is the index.html file –
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
<script src=”script.js”></script>
</head>
<body>
<h1>File Upload</h1>
<form action=”#” method=”post”>
<ul>
<li>
<label for=”name”>Name:</label>
<input type=”text” name=”name” id=”name” multiple>
</li>
<li>
<label for=”file_upload”>File:</label>
<input type=”file” name=”file_upload” id=”file_upload” multiple>
</li>
<li><input class=”button green” type=”submit” name=”submit” value=”Submit Content”></li>
</ul>
</form>
</body>
</html>
Here is the Javsacript file (script.js) code
$(function()
{
var files;
// Add events
$(‘input[type=file]’).on(‘change’, prepareUpload);
$(‘form’).on(‘submit’, uploadFiles);
function prepareUpload(event)
{
files = event.target.files;
}
function uploadFiles(event)
{
event.stopPropagation();
event.preventDefault();
$.ajax({
url :’http://access.alchemyapi.com/calls/image/ImageGetRankedImageFaceTags?apikey=yourkey&outputMode=xml&imagePostMode=raw’,
type: ‘POST’,
data : files[0],
cache: false,
processData: false,
contentType: ‘application/x-www-form-urlencoded’,
success: function(data, textStatus, jqXHR)
{
if(typeof data.error === ‘undefined’)
{
console.log(‘Data: ‘ + jqXHR.responseText);
}
else
{
console.log(‘ERRORS: ‘ + data.error);
}
},
error: function(jqXHR, textStatus, errorThrown)
{
console.log(‘ERRORS: ‘ + textStatus);
}
});
}
});
