js调用手机摄像头

最新推荐文章于 2024-06-07 11:32:43 发布

codeing_doc

最新推荐文章于 2024-06-07 11:32:43 发布

阅读量4.9k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/u010391342/article/details/50108231

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no" />
<title></title>
</head>
<body>
<script>
(function () {
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content = "width=320,minimum-scale=1,maximum-scale=1.3,user-scalable=no";
document.head.appendChild(meta);
if (/Android/i.test(navigator.userAgent)) {
document.body.style.zoom = document.body.clientWidth / 320;
}
})();
</script>
<input type="text" required/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p id="statesShow"></p>
<div>13672271585</div>
<div οnclick="">13672271585</div>

<input type="color" οnchange="console.log($(this).val())"/>
<input type="file"/><br/><br/>
<div id="upFile">点击上传到服务器</div>
<input type="image"/><br/><br/>
<input type=""/><br/><br/>
<div οnclick="U.href(0)">href</div>
<input type="checkbox"/>
<input type="number" pattern="[0-9]*"/>
<input type="tel"/>
<input type="month"/>
<input type="time"/>
<input type="datetime-local"/>
上传图片多个
<input type="image" multiple/>
上传视频多个
<input type="video" multiple/>
<button>xxxxx</button>
<img id="img" src="" width="200px" height="200px"/>
<div id="alertImg" style="height: 100px;width: 50px;background-color: red"></div>
<img src="" id="imgTemp" width="200px" height="200px"/>
<div id="video"></div>

文件单个
<input type="file" multiple/>
上传图片单个
<input type="image" multiple/>
上传视频单个
<input type="video" multiple/>
</body>

<script src="../static/js/Roy.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('button').on('click', function () {
// var a = $('input:checked');
// console.log(a);
// console.log(typeof a);
// console.log(a.length);

var datetime = $('input[type="datetime-local"]').val();
console.log(datetime);
var d = new Date(datetime);
console.log(d);
console.log(d.getTime());
console.log(typeof datetime);
console.log(datetime.length);

})
$('#alertImg').on('click', function () {
var src = $("#img").attr("src");
alert(typeof src);
alert(src);
alert(src.replace('blob:',''));
$('#imgTemp').attr('src',src.replace('blob:',''));
});
$('input[type="file"]').on("change", function(){
fs = this.files[0];
console.log(fs);
var url = (window.URL || window.webkitURL).createObjectURL(fs);
$('#statesShow').html(url);
if(fs.type.indexOf('image') > -1){
$("#img").attr("src", url);
}else{
$("#video").html('<video src='+url+' width="200px" height="200px" controls></video>');
}
})
$('#upFile').on('click', function () {
var form = new FormData();
var xhr = new XMLHttpRequest();
xhr.open("POST", 'http://192.168.0.6:8080/nongfuapi/rest/upload/uploadFile');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
alert('成功');
}
};
form.append("file", fs);
xhr.send(form);
})
</script>
</html>

codeing_doc

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js调用手机摄像头

(function () { var meta = document.createElement("meta"); meta.name = "viewport"; meta.content = "width=320,minimum-scale=1,maximum-scale=1.3,user-scalable=no"; doc
复制链接

扫一扫

专栏目录