使用PHP从网络摄像头或浏览文件上传图像

时间:2016-09-12 04:54:45

标签: javascript php

我有一个脚本从网络摄像头捕获图像并使用php将其存储在目录中。

这是我的HTML代码

<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代码

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

这个脚本运行正常..但我想添加一个浏览文件选项。用户可以使用网络摄像头捕获图像,也可以从设备中浏览文件。

我是javascript的新手。是否可以添加两个选项

1 个答案:

答案 0 :(得分:1)

首先,您需要确保将PHP配置为允许文件上载。 在“php.ini”文件中,搜索file_uploads指令,并将其设置为On。

$2

在您的HTML表单中添加代码以允许用户选择浏览文件

file_uploads = On

在file_uploader.php中

<!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>

使用W3Schools的tutorial作为参考