file 多次上传附件功能完善

之前解决了一个页面中的单个附件上传问题，使用的是 id 定位。但是一个页面中，可能存在多个附件上传的地方，这时候如果继续使用 id，会出问题。

我依旧会上传一个附件。附件链接地址：

 https://files.cnblogs.com/files/fchx91/uploadFilesNew.rar

so。拓展如下：

// * 添加图片

        function bindPic(inputId, picShowId,inputDivId,maxLen){
            var picFileLen = $("#"+inputDivId).children().length; //初始状态是从0 开始的
            if(checkLen(picFileLen,maxLen)){
                var newInput = $("#"+inputId).clone();  // 依旧是 input-file 的克隆，保存 files[0] 信息
                newInput.attr("id",inputDivId+picFileLen);  // 更换id 
                newInput.attr("onchange","");  //清除 onchange 事件
                $("#"+inputDivId).append(newInput);  // 存放在 inputDivId 中
                //  以下内容是获取到 files[0]中的相关信息---不仅仅适用于图片，也适用于视频哟。 video--src / type
                var iName = document.getElementById(inputId).files[0].name;
                var iSize = Math.round(document.getElementById(inputId).files[0].size / 1024);
                var sizeInfo;
                if (iSize>1024){
                    sizeInfo = Math.round(iSize / 1024 )+"Mb";
                }  else {
                    sizeInfo = iSize +"Kb";
                }
                var iUrl = URL.createObjectURL($("#"+inputId)[0].files[0]);
                var html ="<div class='pic-thumbnail' data-unique='"+iName+"'><button class='delete-content' onclick='deletePic(this)'></button>";
                html += "<p data-value='picName'><strong>"+iName+"</strong></p>";
                html += "<span data-value='picSize'>"+sizeInfo+"</span>";
                html += "<img data-value='picImg' width='130px' src='"+iUrl+"' alt='"+iName+"' />";
                $("#"+picShowId).append(html);
                $("#"+picShowId).css("display","inline-block");  //picShowId 用来存放实际展示的图片信息列表
            }
        };
        //  删除图片，并且删除对应的 file
        function deletePic(obj){  //obj 在这里实际代表的是  this
            var gradDiv = $(obj).parent().parent();  //找到 picShowId ;这个必须在前,否则  parIndex 会报错
            var inputDivId = gradDiv.attr("id");  //根据 id 找到 inputDivId


            //    删除这个结构的同时，需要删除对应的数据。打算采用找 index 的方法，来删除 picFile 中对应的数据
            var parIndex = $(obj).parent().index();
            $(obj).parent().remove();
            
            var fileDivId = $("#"+inputDivId).siblings("[data-value='files']").attr("id");
            console.log("存放files 的div 的ID 属性fileDivId===="+fileDivId);

            // picInputDiv index>picIndex 角标依次 -1;
            var inputLen = $("#"+fileDivId).children().length;
            var Dvalue = inputLen-1-parIndex;
            if(Dvalue ==0) {
                $("#"+fileDivId).find("#"+fileDivId+parIndex).remove();
            } else if(Dvalue > 0) {
                $("#"+fileDivId).find("#"+fileDivId+parIndex).remove();
                for(var i=1; i<Dvalue+1; i++){
                    $("#"+fileDivId+(parIndex+i)).attr("id",fileDivId+(parIndex+i-1));
                }
            }
        };
        // 监测是否超出限制
        function checkLen(len,max){
            if(len<max){
                return true;
            } else {
                console.log("超出max 上限")
                alert("不能再上传了。已经满额 ");
                return false;
            }
        }

　　效果图：