JS操作多图上传

理论多图上传应用的是是autocomplate属性来设置是选择文件是否可以选择多个文件，推荐upload插件，不过现在很多框架自己封装好了很多插件，比如VUE等等。。。

现在讲一下模拟多图上传

html：

<div id="iden-pics">
    <div>
        <div class="iden-rec iden2-rec" id="previewImagesP1"></div>
        <input class="em-btn" type="file"  name="ImagesP1" accept="image/jpeg,image/x-png,image/png"/>
    </div>
    <div class="iden-rec iden2-rec" id="previewImagesBtn">
         <i class="iconfont pic pic2">&#xe651;</i>
    </div>
    <input type="hidden" value="1" name="ImageIndex" id="ImageIndex">
</div>

JS：

function picadd() {
$("#previewImagesBtn").click(function () {
    var num = $("#ImageIndex").val();
    $("input[name=ImagesP"+num+"]").unbind("change").change(function () {
        previewLocalImageFile(this, $("#previewImagesP"+num));
        if($(this).data("has-file")){
            $('#previewImagesP'+num).append('<div class="pics_close">×</div>');
            $("#previewImagesP"+num).show();
            num++;
            $("#ImageIndex").val(num);
            $("#previewImagesBtn").before('<div><div class="iden-rec iden2-rec" id="previewImagesP'+num+'"></div><input class="em-btn" type="file"  name="ImagesP'+num+'" accept="image/jpeg,image/x-png,image/png"/></div>')

            if($("#iden-pics input[type='file']").size()>9){
                $("#previewImagesBtn").hide();
            }
        }
    });
    $("input[name=ImagesP"+num+"]").unbind("click").click();
    })

    $(document).on("click","#iden-pics .pics_close",function () {

        $(this).parent().parent().remove();
        $("#previewImagesBtn").show()
    })
}
picadd();

上来显示的是一个按钮，但在按钮前面有一个隐藏的图片容器，选择图片后容器显示，装上图片，显示出来
到了自己定的图片数量上限， 添加图片按钮消失。