工作小记

工作小记

需求：目前做一个前端的多文件上传功能，文件及大小类型控制已完成，现在需要获取动态生成的input的value值，以及是否选择了文件。

本以为是个简单问题——

原版

相关代码

<div id="FilesDiv">
                <input type="file" id="file" name="File" onchange="fileChange(this)" required="" style="float:left;" />&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn-primary" onclick="addFiles()"><i class="fa fa-plus"></i></button>
 </div>


<script th:inline="javascript">
    var  indexCount = 1;

    function addFiles() {
        let divStr = '<div><br><input type="file"  id="file'+indexCount+'" name="wenjianFile" onchange="fileChange(this)" required="" style="float:left;"/> &nbsp;&nbsp;&nbsp;&nbsp;<button class="btn-danger" onclick="removeFiles(this)" ><i class="fa fa-minus"></i></button></div>';
        $("#FilesDiv").append(divStr);
        indexCount++;
    }
    function removeFiles(btn) {
        btn.parentElement.remove();
        indexCount--;
    }

 function submitHandler() 
{
        let inputResult = true;
        for (let i = indexCount; i >1; i--) {
            let indexID = "file"+(i-1);
            if ($("#"+indexID).val() == "" || null == $("#"+indexID).val()){
                inputResult = false;
            }
        }
        if ($("#file").val() =="" || null == $("#file").val()){
            inputResult = false;
        }

        if(inputResult){
            ……提交操作
            ｝else｛
            alert("请选择需要上传文件！");
            ｝
｝            
        
</script>

然后发现出现bug——

点击生成新的文件选择框，再进行删除操作；如果从最后一个开始删，没有问题正常；但是生成多个然后随机删除，就会获取不到某些input内的值。

这是 var indexCount = 1;indexCount++;引发bug的位置。

思考了一下，进行修改

<script th:inline="javascript">
    var  indexCount = new Date().getTime();
    var inputIndexMap = {};

    function addFiles() {
        let divStr = '<div><br><input type="file"  id="file'+indexCount+'" name="wenjianFile" onchange="fileChange(this)" required="" style="float:left;"/> &nbsp;&nbsp;&nbsp;&nbsp;<button class="btn-danger" onclick="removeFiles(this)" ><i class="fa fa-minus"></i></button></div>';
        $("#FilesDiv").append(divStr);
        let str = "file"+indexCount;
        inputIndexMap[str] = str;
        indexCount = new Date().getTime();
    }
    function removeFiles(btn) {
        btn.parentElement.remove();
        let str =  btn.parentElement.getElementsByTagName("input").item(0).id;
        delete inputIndexMap[str];
    }
function submitHandler() {
        let inputResult = true;
        for(let map in inputIndexMap)
        {
            if ($("#"+map).val() == "" || null == $("#"+map).val()){
                inputResult = false;
            }
        }
        if ($("#file").val() =="" || null == $("#file").val()){
            inputResult = false;
        }

        if(inputResult){
            ……提交操作
            ｝else｛
            alert("请选择需要上传文件！");
            ｝
｝            
        
</script>

记数改map并用时间戳来防止key重复，满足了需求。

再引一些js里对map的简单操作吧

//声明
var map ={}

//增
map[key] = value

//删
delete map[key]

//遍历
for(let mapi in map)
{
    console.log( mapi+":"+inputIndexMap[mapi]);
}

//获取长度
Object.keys(data).length

申请一段时间没想好写什么，就写点遇到的小问题