Develop Reference

How do I submit get request from JavaScript to server without using a form

This a local webserver app
I have a form representing progress with a single submit button, this submits to my server and then the server will construct a new page with updated progress bars, so the users see the progress bars updated every time they click on the 'Check Progress' button.
But what I wanted it to do is automatically check every 5 seconds without needing the user to press button. So I have a javasscript that submits the form after 5 seconds, so every 5 seconds the page is replaced with a new page with updated progress bars.
This works great, so now I dont need the form button. But If i remove the form then my javascript wont work because I no longer have a form to submit.
I read I can use Ajax to talk to server, receive updated data and update existing page. But I dont want to do this i want to keep javascript to a minimum as I find it very difficult to get it working.
I just want the javascript to make request to server that will then replace existing page with new updated page, but how do I make a simple getrequest to server using javascript.
This is what I currently have
....
<tr>
<td>
<label for="pb12">
Errors
</label>
</td>
<td>
<progress id="pb12" value="0" max="100">
</progress>
</td>
</tr>
</table>
<form action="/check_progress" id="check_progress">
<p>
<input type="submit" value="Check Progress">
</p>
</form>
<script>function checkprogress() { document.getElementById('check_progress').submit(); }; setTimeout(checkprogress, 5000)</script></body>
</html>

So how can you reload the page without a form? Meta refresh tag
<meta http-equiv="refresh" content="5">
Just make sure you have the proper no cache headers.
Or use JavaScript to reload the page
window.location.reload(true);
Or just submit the form
document.getElementById("yourForm").submit()
or change the backend to return just the updated content and spit that out with an Ajax call.

Upload html2canvas image to database

Is it possible to upload the image html2canvas gives, to database.
Bassically when i click Save, it redirects me to save.php where i can see the screenshot i made, view the image, and view the image locally on my local server.
The main question is, can a form be made, where on save.php i will be able to save the image as a random number (etc 32245652226225.jpg) into a specific folder and insert the value into database with values: img_name , img_date
Then i could retrive all the images from database, and sort them by date.
I would appreciate any help.
This is the result i got
This is my index.php
function capture() {
$('#target').html2canvas({
onrendered: function (canvas) {
//Set hidden field's value to image data (base-64 string)
$('#img_val').val(canvas.toDataURL("image/png"));
//Submit the form manually
document.getElementById("myForm").submit();
}
});
}
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
<input type="submit" value="Sacuvaj" onclick="capture();" />
<div id="target">
<h1>TESTING</h1>
</div>
And this is the save.php
<?php
//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
//Decode the string
$unencodedData=base64_decode($filteredData);
//Save the image
file_put_contents('slika.jpg', $unencodedData);
?>
<h2>Screenshoot</h2>
<table>
<tr>
<td>
folder
</td>
<td align="right">
nazad
</td>
</tr>
<tr>
<td colspan="2">
<br />
<br />
<span>
</span>
<br />
<?php
//Show the image
echo $_POST['img_val'];
echo '<img class="img-responsive" src="'.$_POST['img_val'].'" />';
?>
</td>
</tr>
</table>
<style type="text/css">
body, a, span {
font-family: Tahoma; font-size: 10pt; font-weight: bold;
}
img{
width:400px;
}
</style>

The answer is YES ;)
I mean, it seems like you found the puzzle pieces yourself already:
capture the screen on client
submit that via a form to the server
write meta info like capture date to a database which returns you unique ID numbers (any number id)
copy the file to a folder with the filename adhering to the file ID (and appy some logic to create a new subfolder on every 4 digits of your file ID)
have another script that helps you to search for images and to display them
If you actually ask for a free of charge coding service I am sorry to say that I cannot help you. Anyway, for database accesses there are nice tutorials out there, if you are just lacking some basic knowledge on that edge.
Btw. maybe rendering the html to img on server side might even be better:
Convert HTML to image in php

Progress bars while jsp page is loading

I've a jsp page which internally calls few java classes before it renders the content on the browser. The whole process is taking 1-2 minutes, so I want to show some progress bars or animations (preferably progress bar). Have gone through few posts in Stackoverflow and couldn't get much.
Have tried pace.js and few javascript and jquery techniques but couldn't get the desired effect.
It would be great if someone here help me with some ready made code snippets or the links or some tricks which help me in solving this problem.
Note: I've not used any servlet, completely used scriptlets .
Thanks in advance.

The easiest way to add a simple loading item to the page is with a gif image. I would use jQuery to show the gif and when the content is ready hide it.
I found this snippet, it could be helpful: http://jsfiddle.net/msjaiswal/FAVN5/
.loadinggif {
background:url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat right center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='inputsource' />
<br>
<button onclick="$('#inputsource').addClass('loadinggif');">Show Loading</button>
<br>
<button onclick="$('#inputsource').removeClass('loadinggif');">Hide Loading</button>

I've got one on my JSP.
<form enctype="multipart/form-data" name=uploadSapFile action="sapFileUploader.jsp" method="POST" onsubmit="block();">
<table border=0 width="50%">
<tr>
<td colspan="2" align="center"><input id="process" type="submit" value="PROCESS"></td>
</tr>
</table>
<img id="ajax-loader" src="../../../images/ajax-loader.gif" style="display: none;" />
<script type="text/javascript">
function block() {
// This will add a "processing" animation while the system is busy with the file and also makes a "PROCESS" button deselected
document.getElementById('ajax-loader').style.display='block';
}
</script>
</form>
U are interested in the first line where onsubmit form action is performed, img tag and javascript function and process button.
And big choice of nice animations here

How to reference to an uploaded img src in HTML

I am creating a responsive mobile website, and I want to be able to take and then upload a picture from the device. I have got this part working using
<form method="post" action="takephoto.php" enctype="multipart/form-data">
<input type="file" id="myfile" name="myfile" accept="image/*;capture=camera"/>
</form>
Now, what I am having trouble with is, after I have selected the picture that I want to use I do not know how to reference it later in my code. The reason I need to is I am using a .js library which allows me to upload a picture of a ISBN barcode and the .js file will read this file and spit out the ISBN as text which I will do more with later. (maybe link this to a Google Books API)
This is where I am getting the barcode scanner .js from: http://badassjs.com/post/654334959/barcode-scanning-in-javascript
I am relatively new to all of this, thanks for your help.

You will have to use ajax. This link contains some useful information for you.
Use ajax to get the picture uploaded and in the response, return the url or "failed". Then you can use in your js code,
if(response=="failed"){
//Handle upload failed
}
else {
//Handle url. Here response is your url actually.
// So to append the image to a given id, you would use,
$("#append_to_id").append("<img src='"+response+"'>");
}

Since the JavaScript library you are using is parsing an image on the page,
you have to show the image on the page after you have uploaded it.
So basically you need 4 steps to achieve this:
show an upload form (This is what you have done in the question);
grab the image uploaded in step 1 and save it to an accessible place
display the image on the screen
call get_barcode_from_image.js to parse it
Here's a piece of code for reference. It contains all the 4 steps above.
<?php
// step 2: save the image
if ($_FILES['myfile']['error'] == 0) {
move_uploaded_file($_FILES['myfile']['tmp_name'], 'u/barcode.jpg');
?>
<!-- step 3: show the image -->
<img src="u/barcode.jpg" id="barcode">
<script src="get_barcode_from_image.js"></script>
<div id="result"></div>
<!-- step 4: parse the barcode -->
<button onclick='document.getElementById("result").innerHTML = getBarcodeFromImage("barcode")'>scan</button>
<?php
}
?>
<!-- step 1: show the upload form -->
<form method="post" action="barcode.php" enctype="multipart/form-data">
<input type="hidden" name='a' value='b'/>
<input type="file" id="myfile" name="myfile" accept="image/*;capture=camera"/>
<input type="submit" value="submit" />
</form>
Of course you can use ajax or so to get better user experience, but the process won't change.

upload a file via a form using ASP

I have a simple html form in a .asp page. I would like add a field to let users upload files via the form on my server/ftp on the fly. Any suggestions on how I can do this please?
this is the code I am using for the HTML
<form name="formUpload" id="formUpload" method="post" enctype="multipart/form-data" action="">
<table valign="top" align="left" bgcolor="PaleGoldenRod" width="300px" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="PaleGoldenRod" valign="top">
<td width="300px">
<input type="file" size="50" name="file1">
<input type="submit" name="submit" value="Upload File">
</td>
</tr></table></form>
I have no idea how to do this because I never had done something like this.

You could try the following jQuery plugin to handle 'on the fly' uploads:
jQuery File Upload
But like Symeon said, you will need an ASP Classic component that will handle the file uploads on the server. I used the FreeASPUpload version a couple of times, works like a breeze.

In ASP you have to write your own upload handler to take the http stream and write it to disk - there is plenty of example code on the web. I have some, but it is a bit big to post here.
Look at this or this
HTH