如何用input标签上传多个图片并回显

时间 2019-11-17

标签如何 input 标签上传多个图片繁體版

原文原文链接

本文主要记录如何用input标签和jquery实现多图片的上传和回显，不会涉及后端的交互，大概的效果看图

咱们从零来作一个这样的demo

第一步：

咱们先完善一下咱们的页面，默认的input-file标签很是丑，咱们美化一下它，不会的能够百度一下，就是外面套个盒子，设置input的opacity为0，而后外面的盒子设计成咱们喜欢的样式便可，我就随便作了一下。css

仍是放一下源码，只谈效果，不放源码的都是耍流氓
这是bodyhtml

<body>
    <div class="uploadImgBtn" id="uploadImgBtn">
        <input class="uploadImg" type="file" name="file" multiple id="file">
    </div>
</body>

这是css的样式前端

.uploadImgBtn {

        width: 100px;
        height: 100px;
        cursor: pointer;
        position: relative;
        background: url("img/plus.png") no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .uploadImgBtn .uploadImg {
        position: absolute;
        right: 0;
        top:0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
    //这是一个用作回显的盒子的样式
    .pic{
        width: 100px;
        height: 100px;
    }
    .pic img {
        width: 100%;
        height: 100%;
    }

代码的量并无多少，接下来咱们就分析一下如何让图片回显；我知道有两种方式，一种是先上传到服务器，并返回该图片的url，而后渲染在页面中；另外一种呢，是利用h5的FileReader对象直接在本地预览图片，用户确认后再上传服务器。jquery

咱们是采用第二种形式，既然知道了思路那就开始编程吧

<script>
    $(document).ready(function(){
        //为外面的盒子绑定一个点击事件
        $("#uploadImgBtn").click(function(){
            /*
            一、先获取input标签
            二、给input标签绑定change事件
            三、把图片回显
             */
//            一、先回去input标签
            var $input = $("#file");
//            二、给input标签绑定change事件
            $input.on("change" , function(){
                //补充说明：由于咱们给input标签设置multiple属性，所以一次能够上传多个文件
                //获取选择图片的个数
                var files = this.files;
                var length = files.length;
                console.log("选择了"+length+"张图片");
                //三、回显
                for( var i = 0 ; i < length ; i++ ){

                    var fr = new FileReader(),
                        div = document.createElement("div"),
                        img = document.createElement("img");

                    div.className = 'pic';

                    fr.onload = function(e){
                        console.log("回显了图片")
                        img.src = this.result;
                        div.appendChild(img)
                        document.body.appendChild(div);
                    }
                    fr.readAsDataURL(files[i]);//读取文件
                }

            })
        })

    })

</script>

代码的思路也能够说是很简单，先给外面的盒子绑定点击事件，而后获取input标签，给input标签绑定change事件，而后用一个for循环把得到的数据回显出来，for循环里有一个异步事件onload是用来渲染图片，来咱们看看效果图

咱们选择了三张图片，却显示了一张，话说咱们在for循环里建立了三个div和img却只显示了一张图片，这里面确定有蹊跷。web

咱们来仔细分析一下，前面我已经说了，回显的for循环里面有一个异步事件，既然是异步的，可能for循环执行完了，才执行onload事件使咱们设置的下标i值和预期的结果不一致；那咱们如何解决呢，若是咱们能造成一个函数做用域，在里面每次回显一张图片，我以为咱们就可能解决了。咱们来尝试一下，咱们前端可使用jquery的each方案，它自带回调函数，造成了函数做用域。咱们看一下代码

<script>
    $(document).ready(function(){
        //为外面的盒子绑定一个点击事件
        $("#uploadImgBtn").click(function(){
            /*
            一、先获取input标签
            二、给input标签绑定change事件
            三、把图片回显
             */
//            一、先回去input标签
            var $input = $("#file");
//            二、给input标签绑定change事件
            $input.on("change" , function(){
                //补充说明：由于咱们给input标签设置multiple属性，所以一次能够上传多个文件
                //获取选择图片的个数
                var files = this.files;
                var length = files.length;
                console.log("选择了"+length+"张图片");
                //三、回显
                $.each(files,function(key,value){
                    //每次都只会遍历一个图片数据
                    var div = document.createElement("div"),
                        img = document.createElement("img");
                    div.className = "pic";

                    var fr = new FileReader();
                    fr.onload = function(){
                        img.src=this.result;
                        div.appendChild(img);
                        document.body.appendChild(div);
                    }
                    fr.readAsDataURL(value);
                })

            })
        })

    })

</script>

在看一下运行的效果
编程

这回就达到了咱们的预期效果。这就结束了吗，确定不是的，当咱们再次点击上传图片按钮，确定会把上一次的结果给覆盖掉，那当咱们跑业务的时候，这确定不是咱们想要看到的，那咱们如何解决这个问题呢，那确定是用多个input标签啊，那咱们怎么能保证咱们点击的时候就是新加的那个input标签呢，个人解决方案是这样的，咱们把上一次的input标签的id属性清除掉，为咱们新生成的input标签加上这个属性，由于咱们是经过id绑定事件的，因此咱们就能够为咱们新生成的input标签绑定事件了，而原来的input标签由于没有了id属性，而不被选中，咱们来看代码

<script>
    $(document).ready(function(){
        //为外面的盒子绑定一个点击事件
        $("#uploadImgBtn").click(function(){
            /*
            一、先获取input标签
            二、给input标签绑定change事件
            三、把图片回显
             */
//            一、先回去input标签
            var $input = $("#file");
            console.log($input)
//            二、给input标签绑定change事件
            $input.on("change" , function(){
                console.log(this)
                //补充说明：由于咱们给input标签设置multiple属性，所以一次能够上传多个文件
                //获取选择图片的个数
                var files = this.files;
                var length = files.length;
                console.log("选择了"+length+"张图片");
                //三、回显
                $.each(files,function(key,value){
                    //每次都只会遍历一个图片数据
                    var div = document.createElement("div"),
                        img = document.createElement("img");
                    div.className = "pic";

                    var fr = new FileReader();
                    fr.onload = function(){
                        img.src=this.result;
                        div.appendChild(img);
                        document.body.appendChild(div);
                    }
                    fr.readAsDataURL(value);
                })

            })

            //四、咱们把当前input标签的id属性remove
            $input.removeAttr("id");
            //咱们作个标记，再class中再添加一个类名就叫test
            var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
            $(this).append($(newInput));

        })

    })

</script>

图片上传并回显后端篇
 图片上传并回显Ajax异步篇后端