hi i am using jquery and java to acquire the image from scanner device for that i implemented the jsp it is acquire the image from scanner fine. but i am not able to understand how to pass to server to store some where in hard disk or data base. so can any body let me know how to pass the acquired scanned image to server.
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html lang="en">
<head>
<title>Scanning documets</title>
<script type="text/javascript" src="http://direct.asprise.com/scan/javascript/base/scanner.js"></script> <!-- required for scanning -->
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!-- optional -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- optional -->
<style type="text/css">
img.zoom { margin-right: 4px; }
body { margin: 20px 10px; }
</style>
<script>
// -------------- Optional status display, depending on JQuery --------------
function displayStatus(loading, mesg, clear) {
$('#info').empty(); // jQuery is used
if(loading) {
$('#info').html((clear ? '' : $('#info').html()) + '<p><img src="http://asprise.com/legacy/product/_jia/applet/loading.gif" style="vertical-align: middle;" hspace="8"> ' + mesg + '</p>');
} else {
$('#info').html((clear ? '' : $('#info').html()) + mesg);
}
}
// -------------- scanning related code: independent of any 3rd JavaScript library --------------
/* function scanSimple() {
displayStatus(true, 'Scanning', true);
com_asprise_scan_request(myCallBackFunc,
com_asprise_scan_cmd_method_SIMPLE_SCAN, // simple scan without the applet UI
com_asprise_scan_cmd_return_IMAGES_AND_THUMBNAILS,
null);
}
*/
function scan() {
displayStatus(true, 'Scanning', true);
com_asprise_scan_request(myCallBackFunc,
com_asprise_scan_cmd_method_SCAN, // normal scan with the applet UI
com_asprise_scan_cmd_return_IMAGES_AND_THUMBNAILS,
{
'wia-version': 2
});
}
/* function scanThenUpload() {
displayStatus(true, 'Scanning', true);
com_asprise_scan_request(myCallBackFunc,
com_asprise_scan_cmd_method_SCAN_THEN_UPLOAD, // scan and then upload directly in the applet UI
com_asprise_scan_cmd_return_IMAGES_AND_THUMBNAILS,
{
'upload-url': 'http://asprise.com/scan/applet/upload.php?action=upload' // target URL
,'format': 'PDF'
});
} */
/** Use this callback function to get notified about the scan result. */
function myCallBackFunc(success, mesg, thumbs, images) {
var logText;
displayStatus(false, '', true);
logText = 'Callback function invoked: success = ' + success + ", mesg = " + mesg;
logText += '\nThumbs: ' + (thumbs instanceof Array ? thumbs.length : 0) + ", images: " + (images instanceof Array ? images.length : 0)
+",image name"+(images instanceof Array?images.name:0);
logToConsole(logText, !(success || mesg == 'User cancelled.'));
displayStatus(false, '<pre>' + logText + '</pre>', true);
for(var i = 0; (images instanceof Array) && i < images.length; i++) {
addImage(images[i], document.getElementById('images'));
}
}
/** We use this to track all the images scanned so far. */
var imagesScanned = [];
function addImage(imgObj, domParent) {
imagesScanned.push(imgObj);
var imgSrc = imgObj.datatype == com_asprise_scan_datatype_BASE64 ?
'data:' + imgObj.mimetype + ';base64,' + imgObj.data : imgObj.data;
var elementImg = createDomElementFromModel(
{
'name': 'img',
'attributes': {
'src': imgSrc,
'height': '100',
'class': 'zoom'
}
}
);
$('<input>').attr({
type:'hidden',
name:'',
})
$('#imageData').val(imgSrc);
domParent.appendChild(elementImg);
// optional UI effect that allows the user to click the image to zoom.
enableZoom();
}
function submitForm1() {
displayStatus(true, "Submitting in progress, please standby ...", true);
com_asprise_scan_submit_form_with_images('form1', imagesScanned, function(xhr) {
alert("image :"+imagesScanned);
if(xhr.readyState == 4) { // 4: request finished and response is ready
displayStatus(false, "<h2>Response from the server: </h2>" + xhr.responseText, true);
}
});
}
</script>
</head>
<body style="margin: 10px 30px;">
<div style="display: block; position: absolute; right: 30px; top: 20px;">
<!-- <a href="http://asprise.com/" target=_blank> <img src="http://asprise.com/res/img/nav/logo.fw.png"/> </a> -->
</div>
<h2></h2>
<!-- <p style="color: #9eadc0;">For evaluation purpose only. Please order a license from <a href="http://asprise.com/" target=_blank>asprise.com</a>
| <a href="https://github.com/Asprise/scanner.js/blob/master/scanner.js-demo.html" target="_blank">View source code of this page</a>
</p> -->
<div class="panel panel-info" style="margin: 20px 0px;">
<div class="panel-heading">
<h3 class="panel-title">Scann your docs:</h3>
</div>
<div class="panel-body">
<form id="form1" action="action" method="POST" enctype="multipart/form-data" target="_blank" modelattribute="uploadForm">
<label for="field1" style="display: inline-block; width: 150px; text-align: right;">Field 1</label>
<input id="field1" name="field1" type="text" value="value 1"/>
<br><span style="height: 4px;"></span><br>
<label style="display: inline-block; width: 150px; text-align: right;">Documents</label>
<button type="button" class="btn btn-info" onclick="scan();">Scan</button>
<!-- <button type="button" class="btn btn-default" onclick="scanSimple();">Simple Scan</button>
<button type="button" class="btn btn-default" onclick="scanThenUpload();">Scan Then Upload</button> -->
<div id="images" style="margin-left: 154px; margin-top: 10px;">
<input type="hidden" name="imageName" value=""/>
<input type="hidden" name="imageData" id="imageData" value=""/>
</div>
<input type="button" class="btn btn-primary" value="Submit form" onclick="submitForm1();" style="margin-left: 154px; margin-top: 20px;">
</form>
</div>
</div>
<div id="info" class="well" style="display: block; background-color: #fff; height: 500px; margin-top: 12px; padding: 12px; overflow: scroll;">
<p><i>Information window</i></p>
</div>
<script src="http://yyx990803.github.io/zoomerang/zoomerang.js"></script>
<script>
function enableZoom() {
Zoomerang.config({
maxWidth: window.innerWidth, // 400,
maxHeight: window.innerHeight, // 400,
bgColor: '#000',
bgOpacity: .85
}).listen('.zoom');
}
</script>
</body>
</html>
