CODEWITHSUNDEEP
phphtmlimage
Wake Cabbage
Wake Cabbage

Reputation: 110

HTML Detect what image extension in <img> tag

I'm still new to PHP and HTML in general. I'm trying to do a script which I can upload image and then shows the image on a panel. It works as intended but now I'm having a problem if the uploaded image is of different extensions.

For example, the usual image that I upload to show it on the panel is JPEG. But when I upload a PNG image, the image won't load because the tag is already hardcoded to show every uploaded images as .jpg. The panel which shows the image looks like this:

$html  = '<div style="width: 100%"><a href="'.$this->database('source').'" target="_blank"><img alt="'.$this->database('char_name').'-'.$this->database('char_origin').'" src="'.HTML_PATH_PLUGINS_DB.'files/image.jpg" style="width: 100%; height: auto;" /></a></div>';

What I want to do is to have something like a code to detect the extension of the image or perhaps just a usage of wildcards so that the browser will load the image regardless of its extension.

I tried replacing the .jpg with .*, but of course, it doesn't work since it is enclosed in "". I wish there's an easy method to do this. I tried looking all over Stackoverflow but I still don't understand how to do this. Any help is appreciated. Thank you.

EDIT: Here's the whole code:

class PLUGIN_PORTRAIT_PANEL extends Plugin
{
    function __construct()
    {
        parent::__construct();

        $this->fields = array(
        'char_name'=>'',
        'char_name_url'=>'',
        'char_origin'=>'',
        'char_origin_url'=>'',
        'source'=>'',
        'image'=>''
        );
    }

    public function dashboard_config()
    {
        global $Language;

        // Character Name
        $html  = Html::label(array('content'=>$Language->get('CHAR_NAME')));
        $html .= Html::input(array('name'=>'char_name', 'type'=>'text', 'value'=>$this->database('char_name')));

        $html .= Html::label(array('content'=>$Language->get('CHAR_NAME_URL')));
        $html .= Html::input(array('name'=>'char_name_url', 'type'=>'text', 'value'=>$this->database('char_name_url')));

        // Character Origin
        $html .= Html::label(array('content'=>$Language->get('CHAR_ORIGIN')));
        $html .= Html::input(array('name'=>'char_origin', 'type'=>'text', 'value'=>$this->database('char_origin')));

        $html .= Html::label(array('content'=>$Language->get('CHAR_ORIGIN_URL')));
        $html .= Html::input(array('name'=>'char_origin_url', 'type'=>'text', 'value'=>$this->database('char_origin_url')));

        // Image Source
        $html .= Html::label(array('content'=>$Language->get('SOURCE')));
        $html .= Html::input(array('name'=>'source', 'type'=>'text', 'value'=>$this->database('source')));

        // Image
        $html .= Html::label(array('content'=>$Language->get('UPLOAD')));
        $html .= Html::input(array('name'=>'image', 'type'=>'file'));
        $html .= Html::div(array('class'=>'tip', 'content'=>$Language->get('UPLOAD_NOTICE')));

        return $html;
    }

    public function blog_body()
    {
        $html  = '<div style="width: 100%"><a href="'.$this->database('source').'" target="_blank"><img alt="'.$this->database('char_origin').'-'.$this->database('char_name').'" src="'.HTML_PATH_PLUGINS_DB.'ddok/'.$this->database('image').'" style="width: 100%; height: auto;" /></a></div>';
        $html .= '<a href="'.$this->database('char_name_url').'" target="_blank">'.$this->database('char_name').'</a> from <a href="'.$this->database('char_origin_url').'" target="_blank">'.$this->database('char_origin').'</a>.';

        return $html;
    }
}

Upvotes: 0

Views: 2312

Answers (2)

Teson
Teson

Reputation: 6736

As mentioned, you need to pick up the original file name extension, by using 

$_FILES['theFormField']['name']

and generate your suffix from that. Flawed, but still:

//on post
//get suffix.
$a = explode('.',$_FILES['theField']['name']);
$theSuffixToBeSavedInDatabase = $a[1];

//later, upon view
//get the suffix stored in db.
$suffix = $rec['FileSuffix']
echo '<img src='" . $rec['RadomFileNameWithoutSuffix'] . '.' . $suffix . '" />';

Or if you allready have a bunch of images with unknown type stored in the database, grab the first three bytes and look what it says and generate your suffix from that.

Upvotes: 1

Ali Gajani
Ali Gajani

Reputation: 15091

You are trying to find the extension of the file, or in this case, the image.

To do this, you can use the pathinfo() as provided in PHP.

So, it would be used like this, as shown below in the example.

$file = pathinfo('/www/htdocs/inc/black.png');
echo $file['extension'], "\n";

Here's the IDEONE for an example.

This returns the file extension .png.

Now, you'd also need the file name, so this is done as shown below:

echo $file['filename'], "\n"; // since PHP 5.2.0

This would return black.

Upvotes: 2

Related Questions