I'm currently experimenting with trying to extract the information from a QR code located on a local web server. There's an example below (Example 1), however, in that case, the file is online and on the same domain.
My code consists of a user selecting a png QR code from their computer and pressing a submit button. The form should use Ajax and JSON to upload the file through the provided API and receive the information in an array.
Here's the code I have available:
<html>
<head>
<title>QR Code Reader</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="Javascript">
function fileUpload(){
//grab form data
var formData = new FormData($('form')[0]);
console.log(formData);
$.ajax({
url: 'http://api.qrserver.com/v1/read-qr-code/',
method: 'POST',
dataType: 'jsonp',
data: formData,
//async: true,
cache: false,
contentType: false,
//crossDomain: true,
processData: false,
success: function returnedResult(result){
console.log(result);
},
error: alert('error')
});
return false;
}
$(document).ready(function() {
});
</script>
</head>
<body>
<form role="form" enctype="multipart/form-data" action="http://api.qrserver.com/v1/read-qr-code/" method="POST">
<!-- MAX_FILE_SIZE (maximum file size in bytes) must precede the file input field used to upload the QR code image -->
<input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
<div class="form-group">
<!-- The "name" of the input field has to be "file" as it is the name of the POST parameter -->
<label for="file">Choose QR code image to read/scan:</label>
<input type="file" class="form-control" id="file" placeholder="Enter email" name="file">
</div>
<!-- <button type="button" class="btn btn-default" onClick="fileUpload(this.form,'http://api.qrserver.com/v1/read-qr-code/','upload'); return false;">Submit</button> -->
<button type="button" class="btn btn-default" onClick="fileUpload(); return false;">Submit</button>
</form>
<div id="upload"></div>
</body>
</html>Here is a sample image: HelloWorld
Running this code results in a Console error (in Chrome). Any help is appreciated.
Best regards.
</div>
