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

调用照相机，拍照

<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>