Dynamic image upload and large image hover - javascript

I have a page that is supposed to dynamically upload photos and then display them as a thumbnail. Basically, this consists of two files: unit_edit.php and upload.php. My upload works fine, therefore I won't bother posting it. It places the uploaded image in the proper folder as well as the thumbnail with its proper size.
My issue is that it does not display the image once it's uploaded - I have to refresh the page. Also, the hover to display the larger image does not work, either. I am using YoxView which is giving my errors in the console - Uncaught ReferenceError: options is not defined I have to comment it out for the upload to work properly. I do not know how to define options. I tried following the installation guide and it isn't working. Here is my relevant code:
Here is the div where the photos are created and placed
<div class="editunitimages">
<form id="imageform" method="post" enctype="multipart/form-data" action='upload.php?id=<?php print $_GET['id']; ?>' >
Upload image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>
<div id="unit_images">
<?php
require_once('config/db.php');
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
$query = "SELECT id, image FROM images WHERE unit = ".$_GET['id']."";
$result = mysqli_query($con, $query);
echo '<div class="yoxview">';
$i = 1;
while ($row = mysqli_fetch_assoc($result))
{
echo '<img src="unit_images/thumbnails/'.$row['image'].'" alt="'.$i.'" title="image '.$i.'" />';
$i++;
}
echo '</div>';
?>
</div>
</div> <!-- end editunitimages -->
Here is the javascript
<script>
$(document).ready(function()
{
//$("#thumbnails").yoxview([options]);
$('#photoimg').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="images/loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
</script>

Related

Append to current div element in a while loop only

Good day everyone,
I have the following code structure. This code structure loads a page with different post subject and content on it. For each loaded post, a user can leave a comment. Have a look at the following code:
<?php
$getposts = "SELECT * FROM posts";
if ($result = $con->query($getposts)) {
while ($row1 = $result->fetch_assoc()) {
$id = $row1['id'];
$subject = $row1['sub'];
$content = $row1['body'];
$comments = $row1['comments'];
echo"
<div class='content_wrap'>
<div class='subject'>$subject</div>
<div class='content'>$content</div>
<div class='comment'>$comments</div>
</div>
";
?>
<form id='reply' autocomplete="off">
<input type="hidden" value="<?php echo $id;?>" name="id" id="pid"/>
<input type="text" name="comment" id="comment" placeholder="Type a commmment here..."></input>
</form>
<?php
}
}
?>
<script type="text/javascript">
$('form').submit(function () {
var comment = $(this).find('input[name=comment]').val();
var id = $(this).find('input[name=id]').val();
$.post("comments_ins.php", { pub_id: id, comment: comment});
$(this).parent().children('.content_wrap').append("<div
class='comment'" + comment + "</div");
var comment = $(this).find('input[name=comment]').val('');
return false;
});
</script>
All of the above codes I currently have in one page...and the file is a php file type.
Notice that there is a form generated for each loaded post on the page according to the while loop.
The code above works about 90 percent correct. But one thing I don't seem to get right.
I want that when a user leaves a comment, that the comment displays on the page for that post only....nut all of the loaded posts on the page.
So, if a user types a first comment, it is visible, and, if the user types another comment on to that same post, the new comment falls under the previous comment posted....and is visible ....so that it appends to a div element each time a user types a comment.
How do I go about accomplishing this?
If you look at my javascript above, I made an attempt but it did not work for me.
Guidance would be appreciated.
Thanks
try appending an ID to your divs so you can locate them more easily
$id = $row1['id'];
$subject = $row1['sub'];
$content = $row1['body'];
$comments = $row1['comments'];
echo"
<div class='content_wrap'>
<div class='subject' id=subject_$id>$subject</div>
<div class='content' id=content_$id>$content</div>
<div class='comment' id=comment_$id>$comments</div>
</div>
";
This should let you append to only the div you want it on.

not able to update input type file value

1)i am adding image and its title in database
but if i submit form for first time it works but again without selecting the image when its pre selected from first submit
2) submiting form 2nd time takes image value null or is empty(updating image)
<form method="post" enctype="multipart/form-data">
<div id="photoselect_box">
<h5 id="logo_head">Profile Image</h5>
<script>
function profile_imagee(input){
$('#profile_image')[0].src = (window.URL ? URL :webkitURL).createObjectURL(input.files[0]);
}
</script>
//input image preview
<img src="<?php $path = "download/items/$uid/"; echo $path.$userRow['profile_image']; ?>" id="profile_image" alt="profile photo" name="profile_image" />
<input type="file" id="img_file" name="profile_image" onChange="profile_imagee(this);"
value="<?php echo $userRow['profile_image']; ?>" />
</div>
// i am able to update this input after clicking submit
<input type="text" id="download_content1" name="download_content1" value="<?php echo $userRow['download_content1']; ?>" >
</form>
i cannot update the image value in database after submiting form for 2nd time
php code
include_once '../../database/conn.php';
$res=mysqli_query($bd,"SELECT * FROM organisation);
$userRow=mysqli_fetch_array($res);
$email=$userRow['email'];
if (isset($_POST['register'])){
//inserting logo image
$profile_image=$_FILES['profile_image']['name'];
$profile_image_temp=$_FILES['profile_image']['tmp_name'];
// changing the destination required folder according to users unique id
$path = "download/items/$uid/";
#mkdir($path, 0666, true); // Create upload folder.
move_uploaded_file($profile_image_temp,$path.$profile_image);
//updating image in database
$insert="UPDATE organisation SET profile_image= '$profile_image',download_content1 = '$download_content1 '
WHERE email = '$email'";
$insert_pro = mysqli_query($bd,$insert);
}

How to save form/textarea to file with no file extension PHP

I am trying to pull a file in a textarea, edit it, then save the edited data to the same file. The submit function seems to go off, it posts the data, and in javascript console it returns the message "couldn't write values to file!", and in the original text area where it pulled the text from, it blanks out that file as if it overwrote the file with no information.
Am I using the wrong ID for my $data? (Textarea ID is edit, am presuming the information is coming from there).
I've used this same save setup on other .html pages, and am wondering if it is because I am saving to a file that has no file extension. If that is the issue, is there a way around that?
Maybe there is an issue elsewhere?
Snippet from my HTML page of the form area:
<form name="editorarea" method="post" action="/my/site/address/here/revotestingpdsave.php">
<textarea id="edit" style="width: 800px; height: 800px;">
<?php
$filevar = "/my/site/address/here/revotesting/actions";
$handle = fopen($filevar, "r");
$contents = fread($handle, filesize($filevar));
fclose($handle);
echo $contents;
?>
</textarea><p><input class="Save Button" type="submit" name="Save" value="Save" id="submit"></form></p></center>
And this is My Save Form PHP:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$data = $_POST['edit'];
if(get_magic_quotes_gpc()){
$data = stripslashes($data);}
$filevar = "/my/site/address/here/actions";
$fp = fopen($filevar, "w") or die("Couldn't open $file for writing!");
fwrite($fp, $data) or die("Couldn't write values to file!");
fclose($fp);
echo "Saved to $filevar successfully!";
}
?>
<?php
// If this file is not on the server touch() will create it for you
$target = "/my/site/address/here/revotesting.cfg";
touch($target);
?>
to display the successful message on the same page just move the revotestingpdsave.php content to the same page so
<form method="post">
// rest of form
</form>
<?php
if(isset($_POST['edit'])) {
// add revotestingpdsave.php content here
}
?>
$_POST['edit'] is being sent empty, then it's being written to the file making it empty, just add name attribute to the textarea, like this:
<textarea id="edit" name="edit" style="width: 800px; height: 800px;">

send radio input value with jquery to php file

I have a upload image script and now I want update uploaded images in my database.
I have used a php foreach loop and radio input for show each image and select which image is updated
now my problem it's: when I select a radio bottom only send a random value with jquery to my php file but I want send only my selected radio value to my php file.
My php loop is:
<?php foreach($images as $image) { ?>
<?php $src = JURI::base().'images/discount/'.$image['name']; ?>
<input type="radio" name="imgname" id="imgname" value="<?php echo $image['name'] ?>"><img src="<?php echo $src ?>" alt="" height="100" width="100" />
<?php } ?>
And this part of my jquery send radio value to my php file:
vpb_data.append('imgpath', $('#imgpath').val());
Try this -
$(function(){
$("#imgpath").on('click',function(){
var value = $(this).val();
vpb_data.append('imgpath', value);
});
});
I found how can do it I change my jquery to this and it's work:
vpb_data.append('imgname', $('input:radio[name=imgname]:checked').val());

How to save a rendered webpage as image with JavaScript?

In my app I have to provide a 'save as image' button. I want to save the HTML rendered on my webpage as an image in JavaScript. It is a webapp and will be used in browsers of desktop/tablet/mobile phones. How to save rendered HTML as an image?
Check out html2canvas. A javascript framework that renders the page content on a canvas element. Saving the canvas as an image is as easy as:
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
source
Using http://html2canvas.hertzen.com/
index.php
<style>.wrap{background:white;padding:0 0 16px 0;width:1500px;}.colour{width:1500px;position:relative;height:1400px;}p.footer{text-align:center;font-family:arial;line-height:1;font-size:28px;color:#333;}.wrap img{height:389px;width:389px;position:absolute;bottom:0;right:0;left:0;top:0;margin:auto;}p.invert{position:absolute;top:300px;left:0;right:0;text-align:center;display:block;font-family:arial;font-size:48px;padding:0 40px;filter:invert(0%);}p.inverted{-webkit-filter: invert(100%);filter:invert(100%);}</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>
<?php // Open our CSV File
$colours = fopen('colours.csv', 'r');
// Reset Count
$i=0;
// Loop Through the Colours
while (($colour = fgetcsv($colours)) !== FALSE){
// Get the First Item and display some HTML
if($i==0){ ?>
<div id="target" class="wrap">
<div class="colour" style="background:<?php echo $colour[0]; ?>">
<img src="paragon2.png" alt="Image" />
<p class="invert inverted" style="filter:invert(100%);"><?php echo $colour[1]; ?></p>
</div>
<p class="footer"><?php echo $colour[1]; ?></p>
</div>
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
<input type="hidden" name="filename" id="filename" value="<?php echo $colour[0].".png"; ?>" />
</form>
<?php } // Count
$i++;
} // Loop
// Close the CSV File
fclose($colours); ?>
<script type="text/javascript">
$(window).load(function () {
$('#target').html2canvas({
onrendered: function (canvas) {
$('#img_val').val(canvas.toDataURL("image/png"));
document.getElementById("myForm").submit();
}
});
});
</script>
save.php
<?php // Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
$filename=$_POST['filename'];
// Decode the string
$unencodedData=base64_decode($filteredData);
// Save the image
file_put_contents("IMG2/".$filename, $unencodedData);
// Open the CSV File
$file = fopen('colours.csv', 'r');
// Loop through the colours
while (($line = fgetcsv($file)) !== FALSE) {
// Store every line in an array
$data[] = $line;
}
// Remove the first element from the stored array
array_shift($data);
// Write remaining lines to file
foreach ($data as $fields){
fputcsv($file, $fields);
}
// Close the File
fclose($file);
// Redirect and start again!
header( 'Location:/' ) ; ?>
Your question is very incomplete. First, is that a mobile or desktop app? In both cases, the solution to your problem will strongly depend on the HTML engine that renders the pages: Webkit, Geko/Firefox, Trident/IE for example have their own method to produce the view that you want to save as an image.
Anyway, you could start looking at how this Firefox plugin works: https://addons.mozilla.org/it/firefox/addon/pagesaver/
It should do what you want to implement, look for its source code.

Categories

Resources