JS、H5调用手机相册摄像头以及文件夹

转自：https://blog.csdn.net/qq_37610423/article/details/84319410

效果图：
Html代码：

 <div class="file-box clearboth" id="fileBox"><label class="clone-dom" style="display:none;"><input type="file" class="file-btn" name="img[]"/></label> <div class="review-box"></div> <label><input type="file" class="file-btn clone-dom" name="img[]"/></label> </div>

js代码：

<script type="text/javascript">//获取文件urlfunction createObjectURL(blob){if (window.URL){return window.URL.createObjectURL(blob);} else if (window.webkitURL){return window.webkitURL.createObjectURL(blob);} else {return null;}}var box = $("#fileBox .review-box");    //显示图片boxvar file = $("#file"); //file对象var domFragment =  document.createDocumentFragment();   //文档流优化多次改动dom$("#fileBox").on("click", ".file-btn",function(){var index = $(this).parent().index();if(index == 6){alert("最多可以上传4张图片！");return false;}});//触发选中文件事件$("#fileBox").on("change", ".file-btn", function(event){var imgNum = parseInt($("#fileBox .review-box img").length);if(imgNum < 4){var file = event.target.files;  //获取选中的文件对象var imgTag = $("<img src=''/>");var fileName = file[0].name;    //获取当前文件的文件名var url = createObjectURL(file[0]); //获取当前文件对象的URL//忽略大小写var jpg = (fileName.indexOf(".jpg") > -1) || (fileName.toLowerCase().indexOf(".jpg") > -1);var png = (fileName.indexOf(".png") > -1) || (fileName.toLowerCase().indexOf(".png") > -1);var jpeg = (fileName.indexOf(".jpeg") > -1) || (fileName.toLowerCase().indexOf(".jpeg") > -1);var jpeg = (fileName.indexOf(".gif") > -1) || (fileName.toLowerCase().indexOf(".gif") > -1);var jpeg = (fileName.indexOf(".bmp") > -1) || (fileName.toLowerCase().indexOf(".bmp") > -1);//判断文件是否是图片类型if(jpg || png || jpeg || gif || bmp){imgTag.attr("src",url);}else{alert("请选择合适的图片类型文件！");}//最佳显示var imgbox = $("<div class='prev-item'><span class='closebtn'>×</span></div>");imgbox.append(imgTag);box.append(imgbox);event.target.parentNode.style.display = "none";var cloneDom = $(".clone-dom").eq(0).clone().removeAttr("style");$("#fileBox").append(cloneDom);}});$(".review-box").on("click", ".prev-item", function(){var index = $(this).index();$(this).remove();$("#fileBox label:eq(" + (index + 1) + ")").remove();});</script>

CSS代码：

#fileBox{margin:1rem 0;} #fileBox label{border: 1px solid #ccc;display:block;float:left;height:60px;width:60px;background:url(../img/images/images/xiang1_06.png) no-repeat center;background-size: .19rem;background-color: #ccc;margin-left: .17rem;} #fileBox .file-btn{height:50px;width:50px;margin:0 .5rem .5rem 0;opacity:0;} #fileBox .review-box{display:block;float:left;margin-left: .17rem;} #fileBox .review-box img{height:60px;width:60px;margin:0 .1rem .2rem 0;} #fileBox .prev-item{position:relative;display:inline-block;} #fileBox .prev-item .closebtn{position:absolute;right: -1px;top: -4px;display: block;height: 14px;width: 14px;color: #fff;font-size: 16px;line-height:14px;text-align: center;background: red;border-radius: 10px;}#fileBox .prev-item .closebtn {position: absolute;right: 7px; top: -4px;display: block;height: 14px;width: 14px;color: #fff;font-size: 16px;line-height: 14px;text-align: center;background: #8E8E93;border-radius: 10px;}

别忘了引进jq文件哦！！！

JS、H5调用手机相册摄像头以及文件夹相关推荐

html5 调用系统相册,iOS之H5调用系统相册相机浏览文件
在我们iOS开发中大家遇到过H5和原生交互,需要上传文件,刚开始的思路肯定是在之前轻车熟路的js交互中原生方法获取文件之后上传,今天我们了解一个新的方法,其实苹果官方给我们提供了一个更简单的方法, H ...
计算机用户图片存储位置,手机相册在哪个文件夹,详细教您手机图片存放在哪里...
现在使用手机的用户是越来越多了,手机质量都非常好,因此才会受到许多人的褒奖.不过有用户却遇到了,用手机拍摄了照片或者用手机截图,手机连上电脑后,却在电脑上找不到图片,怎么办,下面,小编就来跟讲解手机相 ...
原生js实现打开手机相册并上传文件到服务器
js实现上传文件服务器,打开手机相册在common文件夹中封装公共方法 // 上传照片upimage () {// 打开手机相册return new Promise((resolve, reject ...
H5调用手机摄像头，实时拍照上传（旧）
H5调用手机摄像头,完成拍照,实时上传(旧) 项目开发中,偶尔会遇到网页中调用手机摄像头,通过相册选择或直接实时拍照的方式,完成图片上传的功能型需求. 今天,就通过一个小的案例,演示一下完整的实现流程 ...
H5调用手机摄像头拍照，如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
h5调用手机摄像头获取图片用于人脸识别
h5调用手机摄像头获取图片用于人脸识别 1.安卓手机获取前置摄像头,并在video标签显示注:navigator.mediaDevices.getUserMedia文档说明兼容Safari11,实测 ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
android webview中h5调用拍照/相册通用支持代码
android webview中h5调用拍照/相册通用支持代码. 在webview的 WebChromeClient 中,重写 // For Android >= 5.0 @Overri ...
手机连接服务器数据库文件,手机连接服务器数据库文件夹
手机连接服务器数据库文件夹内容精选换一换 GaussDB(DWS)支持使用gs_dump工具导出某个数据库级的内容,包含数据库的数据和所有对象定义.可根据需要自定义导出如下信息:导出数据库全量信息 ...
手机管理服务器文件夹,手机查看云服务器文件夹
手机查看云服务器文件夹内容精选换一换通过调用云手机服务提供的接口,您可以完整地使用云手机的所有功能.例如查询云手机列表.重启云手机.为云手机推送文件. 区块链服务状态为"异常" ...

JS、H5调用手机相册摄像头以及文件夹

JS、H5调用手机相册摄像头以及文件夹相关推荐

最新文章

热门文章