CODEWITHSUNDEEP
javascriptphp
Akshay N Shaju
Akshay N Shaju

Reputation: 355

Upload image using PHP either from webcam or browse file

I have a script that capture image from webcam and store it in a directory using php.

Here is my html code

<script type="text/javascript" src="scripts/webcam.js"></script>
<script>
    $(function(){
        //give the php file path
        webcam.set_api_url( 'saveimage.php' );
        webcam.set_swf_url( 'scripts/webcam.swf' );//flash file (SWF) file path
        webcam.set_quality( 100 ); // Image quality (1 - 100)
        webcam.set_shutter_sound( true ); // play shutter click sound

        var camera = $('#camera');
        camera.html(webcam.get_html(300, 200)); //generate and put the flash embed code on page

        $('#capture_btn').click(function(){
            //take snap
            webcam.snap();
            $('#show_saved_img').html('<h3>Please Wait...</h3>');
        });


        //after taking snap call show image
        webcam.set_hook( 'onComplete', function(img){
            $('#camera_wrapper').html('<img src="' + img + '">');
            //reset camera for the next shot
            //$("#camera_wrapper").html('&nbsp;');
            //webcam.hide();
        });

    });
</script>
<!-- camera screen -->
<div id="camera_wrapper">
<div id="camera"></div>
<br />
<button id="capture_btn">Capture</button>
</div>
<!-- show captured image -->
<div id="show_saved_img" ></div>

PhP code for storing image

$filename =  time() . '.jpg';
$filepath = 'saved_images/';
$result = file_put_contents( $filepath.$filename,     file_get_contents('php://input') );
if (!$result) {
print "ERROR: Failed to write data to $filename, check permissions\n";
exit();
}
echo $filepath.$filename;
?>

This script is working fine .. But i want to add a browse file option along with this. that is a user can able to either capture an image using their webcam or can able to browse a file from their device.

i'm new to javascript. is it possible to add both options

Upvotes: 1

Views: 4487

Answers (1)

mayorsanmayor
mayorsanmayor

Reputation: 2988

First you need to ensure that PHP is configured to allow file uploads. In your "php.ini" file, search for the file_uploads directive, and set it to On. 

file_uploads = On

In your HTML form add code to allow user choose to browse file

<!DOCTYPE html>
<html>
<body>

<form action="file_uploader.php" method="post" enctype="multipart/form-data">
    Browse file to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload File" name="submit">
</form>

</body>
</html>

In file_uploader.php

<?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;
    }
}
?>

Use this tutorial from W3Schools as reference

Upvotes: 1

Related Questions