I had last time asked that how to get an automatic generated link on the body of website of file uploaded on ftp-server.
Link is this Link to Code Automatic.
But my father wanted that it should not display the filename. Instead it should display that name that he would feed on some other page.
My main storyline is that when i go to that page, it asks me to enter a name that is to be displayed and next to it after <br>, it should give a dropdown menu of the files on the ftp-server and ask me to select the one for which i gave the name. Further on submitting, it displays the link to the file with the name i game.
Kindly help me solve this problem because i am a beginner at PHP and SQL.
Thanks
For the first page, use what was suggested in the first question, but use a HTML select instead:
<?php
// page1.php
// ...
// create a form element
echo '<form action="page2.php" method="get">';
// create the 'name' input
echo 'Enter the displayed name: <input name="name" placeholder="displayed name"><br />';
// start the dropdown
echo 'Enter the file the link should point to: <select name="file">';
// get all files that should be displayed
$files = scandir(__DIR__);
$files = array_diff($files, array('.', '..'));
foreach ($files as $file) {
// add an option to the dropdown
echo '<option value="' . $file . '">' . $file . '</option>';
}
// close the dropdown and the form
echo '</select>';
// add a submit button to the form
echo '<button type="submit">Submit</button>';
echo '</form>';
// ...
?>
On the second page, display the link:
<?php
// page2.php
// ...
$name = $_GET['name'];
$file = $_GET['file'];
echo '' . $name. '<br>';
// ...
?>
Related
I have a website where user can upload images, name and description. I am saving it in mysql and fetching that information to show on my website. That's what my below code does, let the user enter those information (image and text) and show it on the website when they click submit button.
My question is how can I make the div (that shows images, name and desc) to editable when user clicks the edit button (so change that same div to textarea or something that is editable) and for images should have an cross mark near the image when clicked on edit button, so user can delete it and upload button to upload more images.
What I have done: I try to use javascript to get the value of div and use that to change it to textarea, but it says the value is undefined for the grid div.
So, how can I make my div editable as explained above, as what I have try so far is not complete, so is there any better way to make the div editable same way I explained above so user can edit text and upload or delete images?
My code:
<?php
require "database.php"; // connecting to database
session_start();
global $username;
$username = $_SESSION['userUsername'].$_SESSION['userId']; //fetching the username
$image = "userPos/$username"; //fetching image posted by specific user
function listFolderFiles($dir, $username){
<!-- The div my_class is getting the images from local storage
that was initially uploaded by user in the website
(and we stored it in the local storage) to display them on the website -->
echo '<div class="my_class">';
$ffs = scandir($dir);
unset($ffs[array_search('.', $ffs, true)]);
unset($ffs[array_search('..', $ffs, true)]);
// prevent empty ordered elements
if (count($ffs) < 1)
return;
foreach($ffs as $ff){
$s = "'<li>'.$ff";
$saving = "$dir/$ff";
$string = "$saving";
global $string_arr;
$string_arr = (explode("/",$string));
$sav;
$sav = '<li>'.$ff;
global $sa;
$sa = "$ff";
echo '<div class="imagess">';
if(is_file($saving)) {
echo '
<div class="images">
<img src="'.$saving.' " width="100" height="100" alt="Random image" class="img-responsive" />
</div>
' ;
}
echo `</div>`;
if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff, $username);
}
echo `</div>`;
require "database.php";
<!--Here we are fetching the name and description
that was entered by user on the website
and displaying them on the website now-->
$username = $_SESSION['userUsername'].$_SESSION['userId'];
$sql = "SELECT * FROM `_desc` WHERE `username` = '$username' AND `id` = '$string_arr[2]';";
$result = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($result);
if($resultCheck > 0) {
echo '</br>';
while($row = mysqli_fetch_assoc($result) ) {
//name and desc
echo '<div class="grid">' . '<h2>' . $row["_name"] . '</h2>' . '</div>';
echo '<div class="grid2">' . '<p>' . $row["_desc"] . '</p>' . '</div>';
}
<!--Here I am trying when user click on edit button it should
change that div to editable textarea so user can edit
and save it or delete the whole div-->
echo '<button onClick="editName()" class="btn btn-info">
Edit</button>';
echo '<a href="deleteUserInfo.php?edit= '.
$row["id"].'"class="btn btn-danger ">Delete</a>';
}
echo '</div>';
}
listFolderFiles($image, $username);
?>
<script>
function editName() {
console.log("calling");
var divName = $("grid").html();
console.log(divName); //value is undefined here
var editableName = $("<textarea />");
editableName.val(divName);
$("grid").replaceWith(editableName);
editableName.focus();
editableName.blur(saveName);
}
function saveName() {
var htmlName = $(editableName).html();
var viewableText = $("<div>");
viewableText.html(htmlName);
$(editableName).replaceWith(viewableText);
$(viewableText).click(editName);
}
</script>
</body>
</html>
It is quite simple, you should use contenteditable attribute available and set that value to true. This will make the div element editable.
Like this,
<div class="grid" contenteditable="true">I am editable!</div>
In your case, you should use a function to select the element and set the attribute to true. And for the div element on clicking the type='file' input tag, you can write function that will delete the file that is previously uploaded and upload the new file. I would recommend you to research before posting a question in the community as you might get negative impacts on such questions. Hope it helps! Happy coding!!
When the user clicks the edit button, set the contenteditable attribute to true on the target element and set the focus to that element.
function editName() {
$("grid").attr("contenteditable", true);
$("grid").focus();
$("grid").blur(saveName);
}
I have image thumbnails in 100s of directories. I am using PHP to retrieve the images. A bootstrap modal with id #imagePalette window pops up on clicking a button and displays all the images in the directory.
In javascript
$.post('getCroppedImages.php',{'location': location, 'brand':brand},function(data) {
var imagemodal = $('#imagePalette');
imagemodal.find('.modal-title').html('Brand: ' + brand + ' in ' + location);
imagemodal.find('.modal-body').html(data).show();
});
PHP code that retrieves the images:
$path = "projects/" . $database . '/' . $match . '/' . $location . '/' . $brandname . '/*.jpg';
$files = glob($path);
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
$filname = basename($num, ".jpg");
$imgname = basename($num);
$img = $path . $imgname;
$filnam = substr($filname, -9,9);
$filnam = rtrim($filnam);
echo '<ul class="croppeditem" id="croppeditem">';
echo '<li style="list-style:none;cursor:pointer" ><img onclick="clickCroppedImage(this.id); return false"; src="'.$num.'" id="'.$filnam.'"/>';
echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
echo '</li></ul>';
}
The above code works perfectly. It displays the images. I have a function clickCroppedImage attached to each image. When the user clicks on a image in the modal window, this function triggers another php that deletes the image from the folder.
This deletion also works without any trouble. I am trying to refresh the modal modal without closing it so that the current set of images in the folder gets displayed. I have written similar php and javascript code and used unlink to delete the image from the folder.
In Javascript
$.post('deleteAnnCroppedImage.php', {'folder':wd, 'matchLst':matchLst, "imgPath" : clickedImg, 'currentAnnotCheckLocation': currentAnnotCheckLocation, 'currentAnnotCheckBrand': currentAnnotCheckBrand}, function(data){
//imagemodal.find('.modal-body').html().show();
var imagemodal = $('#imagePalette');
imagemodal.find('.modal-body').html("");
imagemodal.find('.modal-body').html(data).show();
});
PHP Code
$currentAnnotPath = "projects/" . $database . '/' . $match . '/' . $location . '/' . $brandname . '/*.jpg';
$files = glob($currentAnnotPath);
$imgPath = $_POST['imgPath'];
unlink($imgPath);
//echo "Deleted Image";
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
$filname = basename($num, ".jpg");
$imgname = basename($num);
$img = $currentAnnotPath . $imgname;
$filnam = substr($filname, -9,9);
$filnam = rtrim($filnam);
echo '<ul class="croppeditem" id="croppeditem">';
echo '<li style="list-style:none;cursor:pointer" ><img onclick="clickCroppedImage(this.id); return false"; src="'.$num.'" id="'.$filnam.'"/>';
echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
echo '</li></ul>';
}
The php scripts returns the ul li data correctly which I can print to console. However, I am not able to refresh the modal body and display the returned images. I tried different combinations, but the modal window does not show any reaction.
How do I clear the modal body and reload the images without closing the modal window?
You will have to use AJAX if I understood your problem correctly.
After a user deleted an image you have to trigger a AJAX request and change the content of the modal.
A good introduction to AJAX can be found via google.
Best regards
You should be able to reach the modal-body element.
First of all make sure you can see it from the current function scope.
Sample codes that are working with the basic bootstrap modal:
Pure JS:
document.getElementsByClassName('modal-body')[0].innerHTML = '<p>some html</p>';
jQuery:
$('#imagePalette .modal-body:first').html('<p>some html</p>');
If there is an iFrame and the modal is inside than you should get into the iFrame document first from JavaScript.
Other:
In these cases you can use jQuery wrapper instead of introducing a new variable. You won't loose performance but it will make this code more readable.
I'm trying to make an invoice php page which contain 2 dropdown option: Supplier_Name and Item_ID. Both of them is not predetermined. Supplier_Name option obtained from another page (List of Supplier, which can be modify). Item_ID option obtained from another page too (List of Item, which can be modify too). I'm quite new about this and my data is small, so I'm looking the simplest way possible.
So far, I knew how to populate Supplier_Name from List of Supplier database. I used this code:
<td>Supplier</td>
<td>
<?php
mysql_connect("localhost","root","");
mysql_select_db("stock");
$result = mysql_query("SELECT * from input_supplier_data");
$jsArray = "var invoice = new Array();\n";
echo '<select name="supplier_name" onchange="changeValue(this.value)">';
echo '<option></option>';
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row['supplier_name'] . '">' . $row['supplier_name'] . '</option>';
$jsArray .= "invoice['" . $row['supplier'] . "'] = {name:'" . addslashes($row['supplier']) . "',desc:'".addslashes($row[''])."'};\n";
}
echo '</select>';
?>
</td>
<br /<input type="text" name="input_supplier_data" id="input_supplier_data"/>
<script type="text/javascript">
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('input_supplier_data').value = supplier_name[id].name;
};
</script>
When a Supplier selected, only their product will be displayed in the second dropdown option. Since List of Item page contain all item from all supplier, I don't know how to limit them. What I can do so far is only if the supplier was predetermined. I used this code:
SELECT input_item_data.`item_id` FROM `input_item_data` WHERE input_item_data.`supplier` = 'UNILEVER'
But as I stated earlier, the item is not predetermined, it can be modify in List of Item page. Hope anyone can help me. Thanks.
Very new to php... bear with me!
I'm creating a photography website and am stuck on a particular page. Ultimately I need the page to be a form with a dynamic number of inputs. It will be a dynamic visual representation of folders (or "galleries") on my web host server. Each div block will contain the first image from the folder along with the name of the folder - the heading text and image should both be clickable and act as a submit button to continue to the album.php page, passing the name of the folder via a GET method.
The first problem I had was trying to get rid of the submit button from a form, and replace with my album thumbnail and album title in an <a> tag. Apparently via javascript, and I managed to get this to work - kind of. I've gotten the page to a state where there is a form, with multiple inputs, but every single folder name is now being passed in the URL (e.g. mywebsite.com/album.php?name=album1&name=album2&name=album3) and I'm absolutely stuck!
The code is included, so if someone could have a look over and offer some guidance or point me in the right direction (and offer any other newbie tips!) it would be much appreciated.
Cheers
Lee
<form id="album" method="get" action="album.php">
<?php
$basepath = 'images/portfolios/public/';
$results = scandir($basepath);
foreach ($results as $result) {
if ($result === '.' or $result === '..') continue;
if (is_dir($basepath . '/' . $result)) {
//create new gallery for each folder
?>
<div class="gallery">
<?php
//get count of images in folder
$i = 0;
$path = 'images/portfolios/public/' . $result;
if ($handle = opendir($path)) {
while (($file = readdir($handle)) !== false){
if (!in_array($file, array('.', '..')) && !is_dir($path.$file))
$i++;
}
}
//create array, and choose first file for thumbnail
$files = array();
$dir = opendir($path);
while(($file = readdir($dir)) !== false)
{
if($file !== '.' && $file !== '..' && !is_dir($file))
{$files[] = $file;}
}
closedir($dir);
sort($files);
//form input - album name for next page
echo '<input type="hidden" name="name" id="name" value="'.$result.'" />';
//the headline and image link for gallery
echo '<a href="javascript: submitform()">' . $result . ' - ('.$i.' images)<br>
<img src="'.$path.'/'.$files[0].'" />
</a>';
?>
</div> <!-- end gallery -->
<?php }
}
?>
</form>
<script type="text/javascript">
function submitform(){document.forms["album"].submit();}
</script>
change your code from:
echo '<a href="javascript: submitform()">' . $result . ' - ('.$i.' images)<br>
<img src="'.$path.'/'.$files[0].'" />
</a>';
to this code:
echo '<a href="admin.php?name='.$result.'">' . $result . ' - ('.$i.' images)<br>
<img src="'.$path.'/'.$files[0].'" />
</a>';
going a bit crazy trying to get this to work... I have a photo upload page that lets you upload multiple photos and displays all the uploaded photos of a specific user below the upload form. I also place a delete button next to each photo however once you delete a photo it keeps displaying that image (although with a broken link as the photo is deleted from the server). I start by looping through a table that holds the file dir and name and then displays those photos. I have a submit button that calls the unlink() function.
$photoQuery= "SELECT * FROM photo_index WHERE User_ID='$UserID'";
$result = mysqli_query($dbcon, $photoQuery);
while ($photo_data = mysqli_fetch_array($result)){
echo "<form id=photo_Form action=listing_photos.php method=post> ";
echo "<input type=hidden name=photoDir value='$photo_data[Photo_Dir]' />";
echo "<input type=submit name=photoDel id=submit_but value=Delete />";
echo "</form>";
echo "<img src='$photo_data[Photo_Dir]' height=100px width=100px>";
}
Then here is the php that deletes the photo file and the row in the table that stored the photo info.
if (isset($_POST['photoDel'])){
$fh = fopen($_POST['photoDir'], 'a');
fclose($fh);
unlink($_POST['photoDir']);
$photoDel= "DELETE FROM photo_index WHERE Photo_Dir='$_POST[photoDir]'";
$result = mysqli_query($dbcon, $photoDel) or die(mysql_error());
echo "Photo Removed";
}
I had to open and close the file before using unlink because if I didnt I would always get a warning after the photo was deleted saying that unlink(images/somephoto.jpg) did not exist (because it had been removed from the server already)
Once the delete button is clicked it should refresh the page shouldn't it?? and when the page refreshes it should reload the query and only display the photos that are listed in the photo tabel?? For what ever reason it takes two refreshes to get that result. Any help would be very much appreciated, or any way to just do this better! Cheers.
First off, your code is vulnerable to SQL injection. You should look into that. Next, maybe you should use JS to find and remove the image from the document. So, have a <button> that runs a function which removes the image with that specific source from the document.
Here's a PHP snippet:
$photoQuery= "SELECT * FROM photo_index WHERE User_ID='$UserID'";
$result = mysqli_query($dbcon, $photoQuery);
while ($photo_data = mysqli_fetch_array($result)){
echo "<form id=photo_Form action=listing_photos.php method=post> ";
echo "<input type=hidden name=photoDir value=". $photo_data[Photo_Dir] . "/>";
echo "<input type=submit name=photoDel id=submit_but value=Delete />";
echo "</form>";
echo "<img src=" .$photo_data[Photo_Dir]. " id = 'picture' height=100px width=100px>";
echo "<script>
var d = getElementById('submit_but');
var b = getElementById('pic');
d.onclick = function(){
pic.parentNode.removeChild(b);
return true;
}
</script>";
}
See here for the JavaScript:
http://jsfiddle.net/BUXBq/