Using a form to add a hyperlink to an image before it's upload to a webpage

Question

Please help. Is there any way to add a hyperlink to an image using a form before it's uploaded to a webpage? I would like to use a form to add links to my images so I don't have to add links to them manually because it would get time consuming. I also want to display a text caption link under the image. The image and the text caption will link to the same place. I want to use a form to add a link to an image and add a text link under the image before it's uploaded. I am using php to write the code.Thank you for your time.

This is photo of form before image is uploaded: upload form image

This is the uploaded image with text caption link under it:The upload image with link under it

This is the code:

<html>
<head>
    <title>Upload and display images with PHP</title>
</head>
<?php
if(isset($_POST['upload_img'])) {
    $file_name = $_FILES['image'] ['name'];
    $file_type = $_FILES['image'] ['type'];
    $file_size = $_FILES['image'] ['size'];
    $file_tmp_name = $_FILES['image'] ['tmp_name'];

    if($file_name) {
        move_uploaded_file($file_tmp_name,"img/$file_name");
    }
}
?>

<body>

    <form action="" method="post" enctype="multipart/form-data">
        <label>upload Image</label><br><br>
        <input type="file" name="image"><br><br>

         <label>Add hyperlink to image:</label><br>
  <input type="text" name="add_link"><br><br>

        <input type="submit" value="Uplad Image" name="upload_img">
    </form>



    <?php
    $folder = "img/";
    //$dir = "img/";
    if(is_dir($folder)) {
        if($handle = opendir($folder)) {
            while(($file=readdir($handle)) != false) {
                if($file ==='.' || $file ==='..') continue;
                echo '<img src="img/'.$file.'" width="150" height="150" alt="">';
            }
            closedir($handle);
        }
    }


    ?>

</body>
</html>

Yes. I want to use a form to input a link that will be added to an image, and I also want to display a clickable text link under the photo. I want the user to be able to click the photo or its text link to go to another webpage. — Carl Max, Aug 20 '16 at 05:47

score 0 · Answer 1 · edited May 23 '17 at 12:23

Please note that users can do bad things just by choosing "appropriate" names for their files. For instance, what would happen if I named my file subfolder/something.jpg"? Or what if I called it "/><script>alert('hi');</script>? And sure, the OS may not allow complicated file names, but you can't think like that in security. Instead, remember that the client can send "any" (not any, but in this context it's the same as any) HTTP data they want to the web server; they don't even have to open that form of yours. There are a few ways of making it more secure (you can google to learn about it), but I won't go in on that now, since you asked about something else.

Moving on to your question, there are several approaches to this. What you need, is to store the link, the text and some reference to the related image somewhere. An approach which I wouldn't recommend is to store these pieces of information in a file, and then use functions like file_get_contents and file_put_contents to write/read it (for instance, you can dedicate each line in the file to a specific image, and use a seperator to seperate the different informations). The problem with this is that it's hard to make secure, and not to mention, the reading of the file will be highly inefficient when it contains a large number of data. There are more problems that I won't go into detail with (simultaneous usage, etc.), but short version is, there are better ways!

Another method is using a database. They are generally designed for this type of usage, making them efficient, safe (when configured and used correctly, that is), etc. The text/link part will go perfectly in a database, for this very reason. There are ways to store images in databases as well, although I wouldn't recommend that, since there are issues with it being slower. If you prefer, you can keep your current method, and simply create a database table with the fields:

image_name | image_link | image_text

In that case, keep the name of the image unique, as it will work as an identifier. If you use this method, all you need to do is to read the image with the given name, then search for the row in the database table WHERE image_name = *name of your image* and use the other columns of that row to print out the text/link.

The printing is done as follows:

echo '<img src="img/'.htmlspecialchars($file).'" width="150" height="150" alt="">'
echo '<br />\n';
echo '<a href="'.htmlspecialchars($link).'">'.htmlspecialchars($text).'</a>';

The reason why I included htmlspecialchars in the above example is to protect against XSS attacks. I won't write the code required to do the querying, because you can easily figure that out yourself just by googling for a database tutorial, if you don't already know about it. Also be sure to use prepared statements, in order to protect your website against SQL-injection.

Using a form to add a hyperlink to an image before it's upload to a webpage

1 Answers1