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());
Related
I have 2 page
the innerhtml onclick page (a.php)
the page that start session (b.php)
in a.php I write function onclick to change some text
and I add the session from b.php in this text, but nothing change in text
$(document).ready(function(){
$('.add-to-cart').on('click',function(){
document.getElementById('outside_cart_text').innerHTML =
"Qty type <?php echo $this->session->userdata('qty_type'); ?> amount <?php echo $this->session->userdata('qty_product');?>";
});
});
it change the original text to "Qty type amount". But session value not appear.
the question is how to make it appear instantly?
additional detail : My click is on the button sumbit to other page, but I have already use this trick. It work like ajax. so after click I still in the same page (and not reload)
<style>
.hide { position:absolute; top:-1px; left:-1px; width:1px; height:1px; }
</style>
<iframe name="hiddenFrame" class="hide"></iframe>
<form action="receiver.pl" method="post" target="hiddenFrame">
<input name="signed" type="checkbox">
<input value="Save" type="submit">
</form>
Maybe it would work if the variables are encoded in json format.
document.getElementById('outside_cart_text').innerHTML =
"Qty type
<?php echo json_encode($this->session->userdata('qty_type')); ?>
amount
<?php echo json_encode($this->session->userdata('qty_product'));?>";
});
$(document).ready(function(){
$('.add-to-cart').on('click',function(){
var qty_type = '<?php echo $this->session->userdata('qty_type'); ?>';
var amount = '<?php echo $this->session->userdata('qty_product'); ?>';
$("#outside_cart_text").html("Qty type "+qty_type+" amount "+amount);
});
});
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);
}
I have the next PHP/HTML code for upload an image:
<label>Image (*)</label>
<!-- if image exists, show it -->
<?php if($category->getImage() === null) : ?>
<input type="file" name="image" id="image" required>
<?php else : ?>
<p><img src="../uploads/images/<?php echo $categoria->getImage(); ?>"></p>
<input type="file" name="image" id="image">
<?php endif; ?>
And I want to validate it using JavaScript
// Validate image
image = document.getElementById("image").value;
if (!image) {
window.alert("You must select a file for the image.");
document.getElementById("image").focus();
return false;
}
The image is required. If you create a new registry it sets all of its atributes to null, including the image. Then, the image is not show and you can set it in the form. If you want to update them, the form shows the current imagen but you don't have to update it if you don't want to.
I need to validate if the file hasn't been uploaded and the value is null it means that the user is creating a new registry and the image is required. If the file hasn't been uploaded but its value isn't null, the user is updating the registry and it isn't required to upload an image.
Thanks in advance and sorry for my bad english.
You can add id to the image
<img id="foo" src="../uploads/images/<?php echo $categoria->getImage(); ?>">
and check if it's in the DOM:
if ($('#foo').length) {
// image is there
}
or without jQuery:
if (document.getElementById("foo")) {
// image is there
}
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>
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.