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
Related
I got a script on a website that reads html from a text file each time I press a button. The text file is chosen depending on what name of the page is given. It works fine and dandy with a tag and working as a button inside of it.
The problem I have is that I do not want the and tags at all if I want only one button, I have tried to call the script with jQuery and ajax in various ways without any luck.
Heres the website(its real basic for testing purposes):
<html>
<head>
<title>PHP Flat File Test</title>
</head>
<body>
<?php include("savedinfo.php"); ?>
// This is how it works, its fine for multiple buttons in a row
<form method="get">
<button type="submit" name="page" value="index" action="savedinfo.php">Index</button>
<button type="submit" name="page" value="page1" action="savedinfo.php">Page1</button>
<button type="submit" name="page" value="page2" action="savedinfo.php">Page2</button>
</form>
//But this is the way I'd like to create a button(not exact properties but in one line)
<input id="pageBtn" type="button" page="page1" value="page1" />
</body>
What it does is simply update an region of the website with html from different text files without reloading the page.
The script that loads the html:
<?php
//the script gets a name for a file(page) to load
$page = $_GET["page"];
//if it got no parameters(i.e. first load of the page, goto index)
if($page == null){
$page = "index";
}
//check if the file/page exists, othervise display error page
if(file_exists($page.".txt"))
$filename = $page.".txt";
else
$filename = "404.txt";
$f = fopen($filename,"rt");
$content = fread($f, filesize($filename));
// send back the read html
echo $content;
#fclose($f);
?>
The text file page is just a plain tag and some text that differs from page to page.
Now is it even possible to use a script or something to get rid of the tags if you want to create a button that sends the name data to the script and updating the current page with the new info?
Attribute action belongs to element form
<form action="savedinfo.php">
Form element input has to be inside of form
<form method="get">
<button type="submit" name="page" value="index" action="savedinfo.php">Index</button>
<button type="submit" name="page" value="page1" action="savedinfo.php">Page1</button>
<button type="submit" name="page" value="page2" action="savedinfo.php">Page2</button>
<input id="pageBtn" type="button" page="page1" value="page1" />
Instead of opening, reading and closing of file you may use file_get_contents. It will give you content of chosen file too.
If you need only change and then export content of chosen file somewhere to screen, use
description of page
and then you need to make process of manipulation with chosen file safe. But it is something you should do by yourself.
But really, nobody cannot make anything instead you. We (at least me) may help with great many things, but ... this is all I can help with.
BTW: It is better to have content of pages in any DB, than in files - if it is not really needed to have it in file.
Best regards.
I need to use the input from a user to create a filename.html on the server they are attached to. The program normally takes the input and writes it TO an existing html file. In this one case, I need to add the ability to create the file they are writing to before they begin writing to it.
While I am wishing :) I would like to start out by showing the user a directory of the html files are already there in case someone else has already created it.
The logic of the input would be to use the data input to create the file IF the file does not already exist. If it does exist, then they would open to the pre-existing file by that name.
This is an adaptation of "Microchat" php script which normally writes to msg.html.
It works fine as-is but this one project needs the added ability of creating multiple Name.html files and then letting the user continue as normal except they will be writing to the filename they chose or created rather than the using the generic msg.html. I have been working on the assumption that I will have to create a variable of their input to use for creating the file.
The entire script for Microchat is only 144 lines. But too long to post in its entirety
It can be viewed at www.phptoys.com. The area I need help with is this:
function createForm () {
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<table align="center">
<tr><td colspan="2">Please eneter a nickname to login!</td></tr>
<tr><td>Your name: </td>
<td><input class="text" type="text" name="name" /></td></tr>
<tr><td colspan="2" align="center">
<input class="text" type="submit" name="submitBtn" value="Login" />
</td></tr>
</table>
</form>
<?php
This is normally used to create the users login. I have tried a few variations on the input to achieve a variable for creating a file but sadly, I know my limits. I doubt I will find a way without help.
I am not sure what you are trying to make. Possibly you can use database for the purpose but purpose is not clear to me so I don't know. By the way you can use following approach. Then you can do customization as per your requirements.
<?php
$fileName = "newHTMLFileName";
$path= "../yourFolder/".$fileName.".html";
if (!file_exists ($path))
{
$code = "<!DOCTYPE html><html><body><h1>Information</h1></body></html>";
$handle = fopen ($path, "w");
$write = fwrite ($handle,$code);
fclose($handle);
echo "created";
}
else
{
echo "already created";
}
?>
I'm new to Wordpress and new to JQuery, so let me start off explaining what I am trying to do.
I have an admin page, inside this page I'm giving the user the ability to upload an image. I want this done using Ajax (independent from the general form update).
Here is the code I have so far:
At top of page - script includes:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js">
I can confirm these scripts are "pingable" and work.
Now the HTML code :
<table width="100%">
<tr>
<td width="100" style="padding:10px" valign="top">Email Image (180x180):</td>
<td style="padding:10px"><img id="previewEmailImage" width=180 height=180>
</td>
</tr>
<tr>
<td></td>
<td>
<div id='emailpreviewloader'>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<form id="imageform" method="post" enctype="multipart/form-data" action="/ajaximage.php">
<input type="file" name="photoimg" id="photoimg" />
</form>
</td>
</tr>
</table>
The key things in the HTML is a) a form and b) The div emailpreviewloader.
Now just after the html table, inline I have the following js:
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#emailpreviewloader").html('');
$("#emailpreviewloader").html('<img width="180" src="/loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(function(result)
{
alert("Thank you for your comment!");
});
});
});
</script>
for testing purposes ajaximage.php just contains 1 line: Echo "It worked";
So assuming I've done my job right, and the html + js above is correct, it would seem Wordpress might be hijacking the Ajax somehow and preventing it from working as expected. Is this possible?
All I want to do is have a regular Ajax post, how is this possible?
EDIT:
What is working:
The change event for the file upload control is firing. I've confirmed this with an alert, and the loader.gif is visible. But it would seem the form isn't firing, or not firing correctly. The inner alert, never fires.
If you don't want to use wordpress's functions for ajax calls, try sending the form to action="<?php bloginfo('template_url');?>/ajaximage.php" and make sure the file is in the root of your wordpress instalation.
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.
I need to display an upload progress indicator on a webpage interface for a client using an embedded Microchip TCP/IP stack Pic32 board. In the webpage, I have an upload file page that lets the client browse and select the appropriate .hex or .wav file to upload to the board memory, and thus be able to eventually bootstrap that file. My problem is that when the file is uploading, the client is unaware of the progress the file is making, and might navigate from the page, and thus cancel download. I need an indicator to show the progress of the upload in order to keep the client informed. Keep in mind I have 5 upload boxes for the different instances needing to be uploaded. I only allow 1 upload at a time.
here is the code for html section:
<table width="900" border="0" cellpadding="1" class="uploadTable">
<tr>
<td width="420" rowspan="2"><form action="fileupload.html" method="post" enctype="multipart/form-data">
<div class="uploadBox">
<p><b>Update Primary System Firmware</b></p>
<p>File:
<input type="file" name="firmwaremain" size="30" />
<input type="submit" value="Upload" />
</p>
</div>
</form></td>
<td width="252" height="23"><div align="center"><strong>Current File Name: </strong></div></td>
<td width="104"><div align="center"><strong>Current File Size:</strong></div> </td>
<td width="104"><div align="center"><strong>File Upload Date:</strong></div></td>
</tr>
<tr>
<td height="40"><div align="center">~curFirmName~</div></td>
<td width="104"><div align="center">~curFirmSize~</div></td>
<td width="104"><div align="center">~curFirmDate~</div></td>
</tr>
</table>
I have the Microchip customHTTPApp.c code available, but it is too cumbersome to post here.
I can email if needed, or chat. I don't have the rep to post pictures, and my web interface site is in a standalone board, so no links.
Thank you in advance for the help!
-Josh
A basic outline/idea:
Use a JavaScript timeout to poll a URL every N seconds: setTimeout(1000*N), "getProgress()");. This is called from onchange for your type="file" input tag
Your JS getProgress function makes an Ajax request to a URL: http//localhost/uploadProgress
Your JS getProgress function also calls setTimeout again on itself (same code) if
the file is not finished uploading.
Your progress URL returns the currently uploading file
progress in percentage (bytes perhaps?) as a JSON string: {progress:"50"}
Have a DIV of N pixels width id="progress-complete" and a
nested DIV id="progress" with width equal to the percentage value
returned by your Ajax call
Let me know if I can expand on that if it's helpful. I'm just posting this in the case you need somewhere to get started.