Accepted Extension of File in HTML

Definition:-

The extensions is accepted by the types of files while uploading in form tag.

Note: The accept tag can only be used with file extension.

Syntax:-

<input accept="file_extension|audio/*|video/*|image/*|media_type">

List:- 

Attribute Values

Value	Description
file_extension	A file extension starting with the STOP character, e.g: .gif, .jpg, .png, .doc
audio/*	All sound files are accepted
video/*	All video files are accepted
image/*	All image files are accepted
media_type	A valid media type, with no parameters.  Look at IANA Media Types for a complete list of standard media types

How to get size of image and its height and width

This will work with modern browsers as from HTML 5 and the File API

<!DOCTYPE html>

<html>

<head>

<style>

#uploadPreview img{

 height:32px;

}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<meta charset=utf-8 />

<title>Multiple image upload with preview by Roko C.B.</title>

</head>

<body>

  <input type="file" id="choose" multiple="multiple" />

<br>

<div id="uploadPreview">

</div>

</body>

<script>

function readImage(file) {

 

var reader = new FileReader();

var image  = new Image();

 

reader.readAsDataURL(file);  

reader.onload = function(_file) {

image.src    = _file.target.result;              // url.createObjectURL(file);

image.onload = function() {

var w = this.width,

h = this.height,

t = file.type,                           // ext only: // file.type.split('/')[1],

n = file.name,

s = ~~(file.size/1024) +'KB';

$('#uploadPreview').append('<img src="'+ this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>');

};

image.onerror= function() {

alert('Invalid file type: '+ file.type);

};      

};

}

$("#choose").change(function (e) {

//if(this.disabled) return alert('File upload not supported!');

var F = this.files;

if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i] );

});

</script>

</html>

How to download image from server to local using database.

If you want that user can download your images that was uploaded by the other user.

For that this could will help you :

<?php

function output_file($file, $name, $mime_type='')

{

 if(!is_readable($file)) die('File not found or inaccessible!');

 $size = filesize($file);

 $name = rawurldecode($name);

 $known_mime_types=array(

    "htm" => "text/html",

    "exe" => "application/octet-stream",

    "zip" => "application/zip",

    "doc" => "application/msword",

    "jpg" => "image/jpg",

    "php" => "text/plain",

    "xls" => "application/vnd.ms-excel",

    "ppt" => "application/vnd.ms-powerpoint",

    "gif" => "image/gif",

    "pdf" => "application/pdf",

    "txt" => "text/plain",

    "html"=> "text/html",

    "png" => "image/png",

    "jpeg"=> "image/jpg"

 );

 

 if($mime_type==''){

     $file_extension = strtolower(substr(strrchr($file,"."),1));

     if(array_key_exists($file_extension, $known_mime_types)){

        $mime_type=$known_mime_types[$file_extension];

     } else {

        $mime_type="application/force-download";

     };

 };

 

 //turn off output buffering to decrease cpu usage

 @ob_end_clean(); 

 

 // required for IE, otherwise Content-Disposition may be ignored

 if(ini_get('zlib.output_compression'))

 ini_set('zlib.output_compression', 'Off');

 header('Content-Type: ' . $mime_type);

 header('Content-Disposition: attachment; filename="'.$name.'"');

 header("Content-Transfer-Encoding: binary");

 header('Accept-Ranges: bytes');

 

 // multipart-download and download resuming support

 if(isset($_SERVER['HTTP_RANGE']))

 {

    list($a, $range) = explode("=",$_SERVER['HTTP_RANGE'],2);

    list($range) = explode(",",$range,2);

    list($range, $range_end) = explode("-", $range);

    $range=intval($range);

    if(!$range_end) {

        $range_end=$size-1;

    } else {

        $range_end=intval($range_end);

    }

    $new_length = $range_end-$range+1;

    header("HTTP/1.1 206 Partial Content");

    header("Content-Length: $new_length");

    header("Content-Range: bytes $range-$range_end/$size");

 } else {

    $new_length=$size;

    header("Content-Length: ".$size);

 }

 

 /* Will output the file itself */

 $chunksize = 1*(1024*1024); //you may want to change this

 $bytes_send = 0;

 if ($file = fopen($file, 'r'))

 {

    if(isset($_SERVER['HTTP_RANGE']))

    fseek($file, $range);

 

    while(!feof($file) && 

        (!connection_aborted()) && 

        ($bytes_send<$new_length)

          )

    {

        $buffer = fread($file, $chunksize);

        echo($buffer); 

        flush();

        $bytes_send += strlen($buffer);

    }

 fclose($file);

 } else

 //If no permissiion

 die('Error - can not open file.');

 //die

die();

}

//Set the time out

set_time_limit(0);

$host = "database_host_name"; 

$db_user = "database_user_name"; 

$db_pwd = "database_password";

$db_name = "database_name";

$con = mysqli_connect($host,$db_user,$db_pwd,$db_name);

$filename = "";

$sqlimg = mysqli_query($con,"Select img from table_name");

if($rowimg = mysqli_fetch_array($sqlimg)){

         $filename = $rowimg[0];

}

//Call the download function with file path,file name and file type

if($filename!="")

{

    output_file($file_path, ''.$filename.'', 'text/plain');

}

?>