Important Update
The following code samples will show how to read barcodes in JavaScript & jQuery using ByteScout Cloud API (low level).
Also, check this article: How to generate barcodes in JavaScript & jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BarcodeReader JQuery sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="read_barcode.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>
<form id="form" enctype="multipart/form-data">
<p>
<label>Copy-paste your API Key for api.pdf.co here</label>
<input type="text" id="apiKey" placeholder="API Key" />
</p>
<p>
<label>InputFile</label>
<input type="file" name="file" id="inputFile" />
</p>
<p>
<label>Barcode Types to read</label>
<select multiple="multiple" size="10" id="barcodeTypesToFind">
<option selected="selected">All</option>
<option>All1D</option>
<option>All2D</option>
<option>AllOMRElements</option>
<option>AustralianPostCode</option>
<option>Aztec</option>
<option>CircularI2of5</option>
<option>Codabar</option>
<option>CodablockF</option>
<option>Code128</option>
<option>Code16K</option>
<option>Code39</option>
<option>Code39Extended</option>
<option>Code39Mod43</option>
<option>Code39Mod43Extended</option>
<option>Code93</option>
<option>DataMatrix</option>
<option>EAN13</option>
<option>EAN2</option>
<option>EAN5</option>
<option>EAN8</option>
<option>GS1</option>
<option>GS1DataBarExpanded</option>
<option>GS1DataBarExpandedStacked</option>
<option>GS1DataBarLimited</option>
<option>GS1DataBarOmnidirectional</option>
<option>GS1DataBarStacked</option>
<option>GTIN12</option>
<option>GTIN13</option>
<option>GTIN14</option>
<option>GTIN8</option>
<option>IntelligentMail</option>
<option>Interleaved2of5</option>
<option>ITF14</option>
<option>MaxiCode</option>
<option>MICR</option>
<option>MicroPDF</option>
<option>MSI</option>
<option>PatchCode</option>
<option>PDF417</option>
<option>Pharmacode</option>
<option>PostNet</option>
<option>PZN</option>
<option>QRCode</option>
<option>RoyalMail</option>
<option>RoyalMailKIX</option>
<option>Trioptic</option>
<option>UPCA</option>
<option>UPCE</option>
<option>UPU</option>
<option>Checkbox</option>
<option>Circle</option>
<option>Oval</option>
<option>UnderlinedField</option>
<option>HorizontalLine</option>
<option>VerticalLine</option>
<option>Segment</option>
</select>
</p>
<button type="button" id="submit">Read</button>
</form>
<div id="errorBlock">
<h2>Error:</h2>
<h4>Code: <span id="statusCode"></span></h4>
<ul id="errors"></ul>
</div>
<div id="resultBlock">
<h2>Result:</h2>
<pre id="result"></pre>
</div>
</body>
</html>
$(document).ready(function () {
$("#resultBlock").hide();
$("#errorBlock").hide();
});
$(document).on("click", "#submit", function () {
$("#resultBlock").hide();
$("#errorBlock").hide();
var apiKey = $("#apiKey").val().trim(); //Get your API key by registering at https://bytescout.com/
var urlUploadFile = "https://api.pdf.co/api/v1/file/upload?apiKey=" + apiKey;
var formData = new FormData($("#form")[0]);
$.ajax({
url: urlUploadFile,
type: "POST",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (fileId) {
ReadBarcodes(apiKey, fileId);
},
error: function (response) {
$("#errorBlock").show();
$("#statusCode").html(response.status);
$("#errors").html("");
$.each(response.responseJSON.Errors, function () {
$("#errors").append($("<li></li>").html(this));
});
}
});
});
function ReadBarcodes(apiKey, fileId) {
var url = "https://api.pdf.co/api/v1/barcodereader/read?apiKey=" + apiKey;
var options = {
"properties": {
"startPageIndex": 0,
"endPageIndex": 0,
"barcodeTypesToFind": {},
},
"input": fileId,
"inputType": "fileId"
};
var barcodeTypesToFind = {};
$.each($("#barcodeTypesToFind").val(), function () {
barcodeTypesToFind[this] = true;
});
options["properties"]["barcodeTypesToFind"] = barcodeTypesToFind;
$.ajax({
url: url,
type: "POST",
data: JSON.stringify(options),
contentType: "application/json",
success: function (response) {
$("#resultBlock").show();
$("#result").html(response);
},
error: function (response) {
$("#errorBlock").show();
$("#statusCode").html(response.status);
$("#errors").html("");
$.each(response.responseJSON.Errors, function () {
$("#errors").append($("<li></li>").html(this));
});
}
});
}
IMPORTANT:
Cloud API is deprecated and was replaced with more powerful and secure www.PDF.co Web API
CLICK HERE
TO LEARN MORE
ABOUT NEW
www.PDF.co
w/ Web API
On-Premise API Server
Cloud API Server