利用HTML5 input type=file实现手机拍照上传

作者:函数茶馆时间:2026-10-21 20:27:59浏览:236

本文介绍了一种利用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路径问题,具体细节可参考之前的博客文章。此外,解决此类问题还有诸多优秀的第三方库,待日后需要深入掌握时再行总结。

最终实现的界面效果如下所示:

HTML5 input file拍照上传实现

HTML5 input file拍照上传实现

以上就是本文的全部内容,希望能为各位的学习提供有益帮助,也欢迎大家继续支持本站。

作者最新文章