Heim > Backend-Entwicklung > PHP-Tutorial > Hochladen von PHP-Bildern und Verwendung des Javascript-Plug-Ins

Hochladen von PHP-Bildern und Verwendung des Javascript-Plug-Ins

墨辰丷
Freigeben: 2023-03-30 21:02:02
Original
1695 Leute haben es durchsucht

本篇文章主要介绍php图片上传及javascript插件的使用,感兴趣的朋友参考下,希望对大家有所帮助。

本文实例讲述了PHP+Javascript实现在线拍照功能,具体如下:

我们在一些WEB应用中可能会遇到这样的情况,用户需要自己现场拍照并上传到会员系统。比如驾校采集指纹拍照流程、考试现场采集照片等。我们今天要讲的是如何使用javascript和PHP实现一个简单的在线拍照并上传的功能。

实现这个功能的前提是你的电脑设备上需要安装有摄像头设备,以及你的浏览器需要支持flash

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Javascript+PHP实现在线拍照功能</title>
</head>
<body>
<p id="cam">
<!--调用摄像组件并显示图像-->
<input type=button value="点击这里拍照" class="btn" onclick="take_snapshot()">
http://siteweb.com/sitemaps.xml
</p>
<p id="results">
<!--显示上传结果-->
</p>
</body>
</html>
Nach dem Login kopieren

在body中加入一个用于调用摄像组件的容器id#cam和一个显示上传信息的容器id#results。

Javascript

接下来调用摄像组件,我们先载入webcam.js,用于拍照和上传的js库。

代码如下:


然后在容器id#cam中,加入以下代码:

<script language="JavaScript">
webcam.set_api_url( &#39;action.php&#39; );
webcam.set_quality( 90 ); // 图像质量(1 - 100)
webcam.set_shutter_sound( true ); // 拍照时播放声音
document.write( webcam.get_html(320, 240, 160,120) );
</script>
Nach dem Login kopieren

我们调用了webcam,其中webcam.set_api_url用来设置图像上传交互的php路径,set_quality可设置图像质量,set_shutter_sound设置声音,get_html输出摄像组件,参数即宽度、高度、上传后宽度、上传后高度。

当点击按钮拍照时,需要执行以下代码:

<script language="JavaScript">
webcam.set_hook( &#39;onComplete&#39;, &#39;my_completion_handler&#39; );
function take_snapshot() {
document.getElementById(&#39;results&#39;).innerHTML = &#39;<h4>Uploading...</h4>&#39;;
webcam.snap();
}
function my_completion_handler(msg) {
if (msg.match(/(http\:\/\/\S+)/)) {
var image_url = RegExp.$1;
document.getElementById(&#39;results&#39;).innerHTML =
&#39;<h4>Upload Successful!</h4>&#39; +
&#39;<img src="&#39; + image_url + &#39;">&#39;;
webcam.reset();
}
else alert("PHP Error: " + msg);
}
</script>
Nach dem Login kopieren

当执行拍照动作时,代码与后台php交互,如果上传图片完成后,则返回相应的信息。

PHP

action.php所做的就是将本地拍照的图像上传到服务器,并将图片路径返回给前端。注意存放图片的路径要给写权限。

$filename = date(&#39;YmdHis&#39;) . &#39;.jpg&#39;;
$result = file_put_contents( &#39;pics/&#39;.$filename, file_get_contents(&#39;php://input&#39;) );
if (!$result) {
print "ERROR: Failed to write data to $filename, check permissions\n";
exit();
}
$url = &#39;http://&#39; . $_SERVER[&#39;HTTP_HOST&#39;] . dirname($_SERVER[&#39;REQUEST_URI&#39;]) . &#39;/pics/&#39; . $filename;
print "$url\n";
Nach dem Login kopieren

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

相关推荐:

PHP比较运算符的种类

关于PHP类的封装与继承

php实现的猜单词小游戏

Das obige ist der detaillierte Inhalt vonHochladen von PHP-Bildern und Verwendung des Javascript-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage