本文介绍了一种利用HTML5 input type=file元素的capture属性实现手机拍照上传的简单方法。通过设置accept和capture属性，浏览器可自动调用设备摄像头，配合JavaScript监听change事件提交表单，无需复杂库即可实现拍照上传功能。
HTML5 input file拍照上传实现
在近期的项目开发中，涉及到了拍照上传功能的需求。经过尝试，发现了一种最为简便的实现方式，现将具体方案总结如下：
<form id="form" method="post" action="http://192.168.1.131:8080/task/add" enctype="multipart/form-data">
<input id="input-file" type="file" accept="image/jpeg" capture="camera"/>
</form>
以下是实现上传功能的核心JS代码片段：
$("input[type='file']").on('change', function () {
$('#form').submit();
//var oFReader = new FileReader();
//var file = document.getElementById('input-file').files[0];
//oFReader.readAsDataURL(file);
//oFReader.onloadend = function(oFRevent){
// var src = oFRevent.target.result;
// $('.content').attr('src',src);
// alert(src);
//}
});
目前看来，type=file类型的input元素功能十分广泛。其核心原理是利用浏览器对input type=file的解析机制，自动获取设备上的文件目录并调用摄像头。注释部分的内容原本用于解决电脑端上传文件时显示页面图片的fakepath路径问题，具体细节可参考之前的博客文章。此外，解决此类问题还有诸多优秀的第三方库，待日后需要深入掌握时再行总结。
最终实现的界面效果如下所示：
以上就是本文的全部内容，希望能为各位的学习提供有益帮助，也欢迎大家继续支持本站。