CODEWITHSUNDEEP
html
MuteX
MuteX

Reputation: 183

How to restrict file extension in operating System dialog box from HTML form

I want to restrict some file types from my html forms that are not necessary in it.
I want the code for my form submission panel.
Here is my code

<form action="" method="POST" enctype="multipart/form-data">    
    <input type="file" name="files"/>    
    <input type="submit" name="upload" value="Upload"/>    
</form>

Upvotes: 0

Views: 1320

Answers (4)

Misunderstood
Misunderstood

Reputation: 5665

To restrict to jpg and jpeg by MIME Type

if (is_uploaded_file($_FILES['files']['tmp_name']) 
   AND $_FILES['files']['error'] ==UPLOAD_ERR_OK) {
  if (strtolower($_FILES['files']['type']) != 'image/jpeg'){
   //not jpg code 
}

Additional Check if uploaded file is not a jpg but has jpg extension and or MIME Type.
Requires GD Image Processing Extension
This is the most rigorous test. The file is completely analyzed. $image can also be converted to other image types, resized, text annotations added, and a lot more. See: http://php.net/manual/en/ref.image.php 

$image = @imagecreatefromjpeg($_FILES['files']['tmp_name']);
if ($image == false){
   //not jpg code 

}

Or if not going to resize etc..
You can restrict by MIME Type, dimensions, attributes
Requires GD Image Processing Extension 

list($width, $height, $type, $attr) = getimagesize($_FILES['files']['tmp_name']);

Upvotes: 0

Tiger
Tiger

Reputation: 424

<form action="" method="post" enctype="multipart/form-data">

      <div id="upload_box" style="width : 200px; height : 200px; position : fixed; top : 300px; left : 400px; display : none;">

           Select File :-  Only jpg and jpeg supported !
           <input type="file" id="fl" name="files" accept="image/jpg, image/jpeg" />

     </div>

     <button id="show_dialog"> Select File </button>
     <input type="submit">

</form>

<script type="text/javascript">

     $(document).on('click', '#show_dialog', function(){
          $('#upload_box').css({'display' : 'block'});  // show box when click on 
     });

     $(document).on('change', '#fl', function(){
         $('#upload_box').css({'display' : 'none'});  // hide box when file selected 
     });

:) Thanks

Upvotes: 0

Leandro Carracedo
Leandro Carracedo

Reputation: 7345

From http://www.w3schools.com/php/php_file_upload.asp

Limit File Type

The code below only allows users to upload JPG, JPEG, PNG, and GIF files. All other file types gives an error message before setting $uploadOk to 0:

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}

Complete Upload Example

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>

Upvotes: 0

yuriy.stos
yuriy.stos

Reputation: 687

In HTML5 you can use "accept" attribute in the input[type=file] tag. For example:

<form action="" method="POST" " enctype="multipart/form-data">    
    <input type="file" name="files" accept="image/jpeg,image/png,image/gif/>    
    <input type="submit" name="upload" value="Upload" placeholder="Only .jpg/.jpeg files support."/>    
</form>

Upvotes: 1

Related Questions