QR码信息提取

时间:2015-08-11 17:11:29

标签: jquery ajax json qr-code

我目前正在尝试尝试从位于本地Web服务器上的QR代码中提取信息。下面是一个示例(示例1),但是,在这种情况下,该文件在线且位于同一域中。

Example 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中)。任何帮助表示赞赏。

最好的问候。

0 个答案:

没有答案