移动端H5图片上传

css

    <style>
    .box{
        width: 500px;
        border: 2px solid greenyellow;
        box-shadow: 3px 3px 3px gray;
        margin: 50px auto;
    }
    .showImg{
        width: 400px;
        margin: 10px auto;
        border: 1.5px dashed yellowgreen;
        box-sizing: border-box;
        box-shadow: 3px 3px 3px gray;
    }
    .imgBox{
        width: 400px;
        margin: 5px auto;
        border: 1px dashed gray;
        position: relative;
    }
    .close{
        position: absolute;
        right: 10px;
        top: 10px;
        font-weight: 900;
        font-size: 25px;
        z-index: 10;
        cursor: pointer;
    }
    img{
        width: 100%;
    }
   
    </style>

html

<div class="box">
        <div class="showImgBox">
            <img src="./images/add.png" onclick="document.getElementById('upFile').click()" alt="添加图片" />
        </div>
        <input type="file" id="upFile" style="display: none" onchange="show()" accept="image/*" />
    </div>

js

<script src="./js/jquery.js"></script>
<script>
window.onload=function(){
    _upFile = $("#upFile");
}
    var _showImgBox = $(".showImgBox").eq(0);
    var _upFile ;
    var _imgFileArr = [];
    function show () {
         //获取新图片的路径。
        var _creatImgSrc="";
         //获取图片的唯一的name属性，以防重复添加相同的图片。
        var _creatImgName = null;
        //创建新图片的载体。
        var _creatImg = null;
         //控制图片去重
        var _de_weight_creatImg = new Boolean();
        var _de_CreatImg_ClassName = "close";
        var num;
            if(_upFile[0].files && _upFile[0].files[0]){
                 _creatImgSrc = window.URL.createObjectURL(_upFile[0].files[0]);
                 _creatImgName = _upFile[0].files[0].name;
                 _de_weight_creatImg = _imgFileArr.every((item,index,array)=>{return item !== _creatImgName;});
            } else {
                //ie下运行
                _upFile.select();//select() 方法用于选取密码域中的文本。
                _creatImgSrc = document.selection.createRange().text;
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    _creatImg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    _creatImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = _creatImgSrc;
                } catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                document.selection.empty();
            }
             //去重 
            if(_de_weight_creatImg){
                _imgFileArr.push(_creatImgName);
                //控制图片数量。
                if(_imgFileArr.length<=2){
                     num = _imgFileArr.length;
                    _de_CreatImg_ClassName = _de_CreatImg_ClassName+num;
                    _creatImg = "<div class=\"imgBox\"><img id="+_creatImgName+" src="+_creatImgSrc+" onclick=\"openPhoto()\"  alt=\"添加的图片\"><span id="+_de_CreatImg_ClassName+" class=\"close \" onclick=\"closes("+_de_CreatImg_ClassName+","+"'"+_creatImgName+"'"+")\">x</span></div>";
                    _showImgBox.append(_creatImg); 
                    console.log($(".imgBox"));
                   
                }else{
                    return alert("图片数量最多为2张");
                }
            }else{
                alert("此图片已存在！！");
                return ;
            };
    }
    
    function closes (name,parentId) {
         $(name).parent().remove();
        console.log("parentId:",parentId);
        var del_imgFileArr_el= _imgFileArr.filter((item,index,array)=>{
             return item !== parentId;
         });
         _imgFileArr = del_imgFileArr_el;
         console.log("_imgFileArr",_imgFileArr);
    }
    
    function openPhoto() {

    }

</script>

切记要引入jquery哦！！！