移动端图片上传

HTML：

<div id="imgContainer" style="margin: 10px;">

          　<div id="imgFiles" style="float:left;">

           　　　　<!-- 过滤掉所有非图片的文件 -->

                      <input name="" type="file" accept="image/*" onchange="showImg();" />

            </div>

</div>

 

CSS：

/* 图片化文件上传按钮 */

        #imgFiles {

            height:28vw;

            width: 28vw;

            background:url(./image/upload.png) center no-repeat;

            background-size: contain;

            position:relative;

            margin-left:1vw;

        }

        #imgFiles input {

            height: 28vw;

            width: 28vw;

            position:absolute;

            right:0;

            top:0;

            opacity: 0;

            filter:alpha(opacity=0);

            cursor:pointer;

        }

 

JS：

// 2.7 图片文件上传（imgFiles）

        function showImg() {

            // 判断，如果文件存在，则进行文件读取显示（防止点击取消按钮出现bug）

            if($("#imgFiles input")[0].files[0]) {

                imgFiles.push($("#imgFiles input")[0].files[0]);

                getImgsByFileReader(document.getElementById("imgContainer"), imgFiles);

            }

        }

        

        // 使用FileReader读取file实例并显示图片

        function getImgsByFileReader(el, files) {

            // 每次都是imgFiles的重新渲染，所以需要先把已渲染的清空

            $(el).find(".img").remove();

            // 循环渲染显示

            for (var i = 0; i < files.length; i++) {

                //父盒子

                let div = document.createElement("div");

                $(el).prepend(div);

                div.setAttribute("style","float:left;position:relative;margin-left:1vw;");

                div.setAttribute("data-name",files[i].name);

                div.setAttribute("class","img");

                //子盒子img

                let img = document.createElement('img')

                $(div).append(img);

                img.setAttribute('style', 'width: 26vw; height: 26vw; vertical-align: middle; margin: 2vw;')

                //子盒子span

                let span = document.createElement("span");

                let x = document.createTextNode("x");

                $(span).append(x);

                $(div).append(span);

                span.setAttribute("style","width:4vw;height:4vw;position:absolute;right:0vw;top:0vw;background:rgba(0,0,0,.2);border-radius:50%;text-align:center;line-height:4vw;color:#fff;");

                

                var reader = new FileReader()

                reader.onload = function(e) {

                    img.src = e.target.result

                }

                reader.readAsDataURL(files[i]) 

            }

            // 图片span点击删除

            $("#imgContainer span").click(function(){

                let name = $(this).parent().attr("data-name");

                let index = imgFiles.findIndex(function(item,index){

                    return item.name == name;

                })

                imgFiles.splice(index,1);

                $(this).parent().remove();

            })

        }