HTML上传本地图片or拍照上传

来源：互联网发布：美国大学放假知乎编辑：程序博客网时间：2024/04/30 08:13

HTML上传本地图片or拍照上传

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <style>        #camera{            font-size: 100px;            left: 0;            top: 0;            opacity: 0;            width: 128px;            height: 30px;            position: absolute;            display:block;        }    </style></head><body><img src="1.jpg" style="width: 100px;height: 100px;" id="imgUrl"><input type="file" id="camera" multiple="multiple" capture="camera" accept="image/*"></body><script src="jquery-1.9.1.min.js"></script><script>     $(function () {            //解决上传图片时capture="camera"在安卓与IOS的兼容性问题（在IOS只能拍照，不能选相册）            var ua = navigator.userAgent.toLowerCase();//获取浏览器的userAgent,并转化为小写——注：userAgent是用户可以修改的            var isIos = (ua.indexOf('iphone') != -1) ||(ua.indexOf('ipad') != -1);//判断是否是苹果手机，是则是true            if (isIos) {                $("input:file").removeAttr("capture");                 };            });    $("#camera").change(function(e){        for (var i = 0; i < e.target.files.length; i++) {            var file = e.target.files.item(i);            var freader = new FileReader();            freader.readAsDataURL(file);            freader.onload = function(e) {                var src = e.target.result;                $("#imgUrl").attr("src",src);            }        }    });</script></html>

阅读全文

0 0