<label>照相机</label>
    <input type="file" id='image' accept="image/*" capture='camera'>
    <br>
    <label>摄像机</label>
    <input type="file" id='video' accept="video/*" capture='camcorder'>

案例效果图：


小案例：
1、html

<div id="surveys">
		<div class="content">
			<div class="survey-welcome">
				<div class="question-wrapper">
					<p style="margin-bottom:0.2rem;">图片(选填提供问题的截图)</p>
					<!-- <input type="file" accept="image/*"> -->
					<input class='upload' type="file" name="file" id="file_more1" accept="image/*" style="display: none;">
					<img class='tianjia' src="img_jia.png" alt="" width='20%'>
					<div style='display:inline-block;width:30%;margin-left:20%'>
						<div style="position:relative;display:none;margin-top:10px;">
							<img class='pic' src="" alt="" width='100%'>
							<span class='cole'>×</span>
						</div>					
					</div>
				</div>	
				<div class="question-wrapper">
					<p>联系方式(选填)</p>
					<input type="text" name="name" placeholder="请输入昵称">
					<input type="tel" name="phone" placeholder="请输入手机号">
				</div>							
				<button type="submit" class="btn">提交</button>		
			</div>
		</div>
	</div>

2、js

$(".tianjia").click(function () {
	    $(this).parent().find(".upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
      	$(this).parent().find(".upload").on("change",function(){
      		$('.question-wrapper div').show();
      		var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
	      	// console.log(url)
	     	if (objUrl) {
	        	$(".pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
	      	}
    	});
	});
	function getObjectURL(file) {
	    var url = null ;
	    if (window.createObjectURL!=undefined) { // basic
	        url = window.createObjectURL(file) ;
	        console.log(url)
	    } else if (window.URL!=undefined) { // mozilla(firefox)
	        url = window.URL.createObjectURL(file) ;
	        console.log(url)
	    } else if (window.webkitURL!=undefined) { // webkit or chrome
	        url = window.webkitURL.createObjectURL(file) ;
	        console.log(url)
	    }
	    return url ;
	}
	// 删除图片
	$(".cole").click(function(){
		$(".pic").attr("src",'') ;
		$('.question-wrapper div').hide();
	})	

3、CSS

		.content{max-width:1200px;font-size:0.32rem;margin:0 auto;color:#333;}
		.survey-welcome{padding:0.4rem 0.26rem;}
		.survey-welcome h3{font-weight:normal;border-bottom:2px solid #e33b3d;margin-bottom: 0.26rem;line-height:0.8rem;}
		.survey-welcome span{color:#e33b3d;}
		.question-wrapper{margin:0.26rem 0;padding:.4rem;background: #fcf6f1;color:#969696;}
		.question-wrapper textarea{width:98%;padding:1%;margin-top:0.26rem;border:none;}
		.question-wrapper input{width:95%;padding:0.1rem 2.5%;margin-top:0.24rem;border:none;font-size:.4rem;height:0.6rem;}
		.btn{width:60%;height:.8rem;border:0;background:#e33b3d;color:#fff;margin:0.2rem 20%;letter-spacing:0.2rem;border-radius:0.2rem;}
		.survey-welcome .cole{font-size:40px;position:absolute;top:-10px;right:0px;color:#9c9c9c;cursor:pointer;}