我目前正在尝试尝试从位于本地Web服务器上的QR代码中提取信息。下面是一个示例(示例1),但是,在这种情况下,该文件在线且位于同一域中。
我的代码包括用户从他们的计算机中选择一个png二维码并按下提交按钮。表单应使用Ajax和JSON通过提供的API上传文件,并以数组形式接收信息。
以下是我提供的代码:
<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>
以下是示例图片: HelloWorld
运行此代码会导致控制台错误(在Chrome中)。任何帮助表示赞赏。
最好的问候。