H5移动端实现仿QQ空间照片上传效果代码

最近在做项目的时候需要实现一个手机端上传图片效果，但是本来想用H5 的 multiple属性进行一次性多图上传，无奈安卓系统兼容性硬伤，暂时找不到兼容安卓网页版的多图上传方案，于是就仿了QQ空间网页版的图片上传效果。代码如下：

效果图：

javascript部分：

 <script>
                //获取文件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);

                        //判断文件是否是图片类型
                        if(jpg || png || jpeg){
                            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>
            <!--选择图片上传-->

HTML部分：

<!--选择图片上传-->
            <div class="form-group">
                <label>
                    <strong style="color:#FF0000;">&nbsp;</strong>执照图片：
                </label>
                <label class="openflag"><input type="checkbox" class="hidden" value="" />不公开</label>
                <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>
            </div>

CSS部分：

/******图片上传******/
#fileBox{margin:1rem 0;}
#fileBox label{display:block;float:left;height:50px;width:50px;background:url(../../img/uploadImg_bg.png) no-repeat center;}
#fileBox .file-btn{height:50px;width:50px;margin:0 .5rem .5rem 0;opacity:0;}
#fileBox .review-box{display:block;float:left;}
#fileBox .review-box img{height:50px;width:50px;margin:0 .5rem .5rem 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;}
/******图片上传******/

天气好热，租不起空调房的孩子晚上睡觉真的是…