掉摄像头进行拍照上传图片
1.第一种方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"> </script><!--根据路径自行引入-->
<style>
#filed{
width:100%;
height:50px;
border: 1px solid #ccc;
}
.imgs{
width: 100px;
}
</style>
</head>
<body>
<!-- <input type="file" id="filed" accept="image/*" capture="camera"/><!-- //直接调用摄像头拍照 -->
<input type="file" id="filed"/>
<img src="" alt="" class="imgs">
</body>
<script>
//在input file内容改变的时候触发事件
$('#filed').change(function(){
//获取input file的files文件数组;
//$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
var file = $('#filed').get(0).files[0];
//创建用来读取此文件的对象 运行吧
// 你要的图片信息啥的不都有了吗 然后在formdata 提交打印出来的信息 你在手机上也能调动拍照 跟图库
//alert(file.name)
// alert(file)
console.log(window.URL.createObjectURL(file))
var imgURl = window.URL.createObjectURL(file)
$(".imgs").attr("src",imgURl)
})
</script>
</html>
2.这种方法和上面的是一样的 但是上面的不兼容火狐 这个兼容火狐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="ge_pic_icon_Infor"></div>
<div class="Infor_file">
<input type="file" name="uploadPicture" id="file" value="" title="上传照片" accept="image/*" capture="camera" onchange="getPhoto(this)"/>
</div>
</body>
<script>
function getPhoto(node) {
var imgURL = ""; //在上面最先声明一个函数内的全局变量 下面无论哪个判断执行 都会改变这个哥变量
var file = null;
try{ //如果过成功执行
var file = null;
if(node.files && node.files[0] ){
file = node.files[0]; //这个file是图片的各种信息,
// alert(file)
}else if(node.files && node.files.item(0)) {
file = node.files.item(0); //这也是file是图片的各种信息,
}
//Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
try{ //上面那个判断成功 执行// 这个是针对火狐的 因为这个火狐今年改变了 按照上面那种方法行不通了,前一段时间我都被坑了
imgURL = file.getAsDataURL();// 这个如果在火狐浏览器上就执行 也会改变最上面的那个个变量
}catch(e){//上面那个判断不成功 这个执行执行
imgRUL = window.URL.createObjectURL(file);//这个如果在火狐浏览器上就执行 也会改变最上面的那个个变量
//imgRUL 这个是实例化 变成图片路径后的参数,img src里就是填这个路径
}
}catch(e){ //不成功执行
if (node.files && node.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
imgURL = e.target.result;
};
reader.readAsDataURL(node.files[0]);
}
}
creatImg(imgRUL);
return imgURL;
///发起fromdata 传图片写在这。 就发送file 差不多懂了吧？ 。
}
function creatImg(imgRUL){//图片展示的
// $(".imgs").attr("src",imgRUL)
var textHtml = "<img src='"+imgRUL+"'width='300px' height='450px'/>";
$(".ge_pic_icon_Infor").html(textHtml);
}
</script>
</html>
浙公网安备 33010602011771号