用<input type="file" accept="image/*" capture="camera">之后,把图片放到页面上

WEB前端 waitig 633℃ 百度已收录 0评论

调用照相机,拍照

<input type="file" accept="image/*" capture="camera">

调用摄像机,视频

<input type="file" accept="video/*" capture="camcorder">

调用录音机,录音

<input type="file" accept="audio/*" capture="microphone">

第一种方法:

<body>
<input type="file" id="file_input" name="img" />
<img id="showimg">

<script type="text/javascript">
        var showimg = document.getElementById("showimg");
        var imginput = document.getElementById("file_input");
        imginput.onchange = function () {
            var files = this.files;
            var url = URL.createObjectURL(files[0]);
            showimg.src=url;
        }

</script>
</body>

第二种方法:

<body>
<input type="file" id="file_input" name="img" />
<div id="showimg"></div>

<script type="text/javascript">
    ! function(a, b) {
        var showimg = document.getElementById("showimg");
        var imginput = document.getElementById("file_input");
        if (typeof FileReader === 'undefined') {
            showimg.innerHTML = "抱歉,你的浏览器不支持 FileReader";
            imginput.setAttribute('disabled', 'disabled');
        } else {
            imginput.addEventListener('change', function() {
                var file = this.files[0];
                if (!/image\/\w+/.test(file.type)) {
                    alert("请确保文件为图像类型");
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    showimg.innerHTML = '<img src="' + this.result + '" alt=""/>'
                }
            }, false);
        }
    }(window);
</script>
</body>

本文由【waitig】发表在等英博客
本文固定链接:用<input type="file" accept="image/*" capture="camera">之后,把图片放到页面上
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)