HTML上传本地图片or拍照上传-CSDN博客

本文链接：https://blog.csdn.net/cq7421/article/details/78331378

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>