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">
              //获取文件url
            function 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");    //显示图片box
            var 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文件哦！！！