使用FileReader读取CSV填充HTML输入框后编辑时值全清如何解决

问题根因 #

1. setCsvValue 中的循环变量 i 未声明为局部变量，默认成为全局变量，极易和其他逻辑的变量冲突，导致循环范围异常，给超出CSV行数的输入框赋值为空
2. 赋值前未判断对应DOM是否存在、CSV对应字段是否有效，空值/不存在的DOM赋值操作会直接清空用户已输入的内容
3. 若csvUpload函数被错误绑定到了文件选择框change事件之外的其他事件（比如表单全局input事件），编辑输入框时就会触发空文件读取，最终清空所有输入框

修复后的代码 #

var participate = [];

// 仅绑定到文件选择框的change事件，不要绑定到其他输入/表单事件
function csvUpload() {
    // 先判断是否选择了有效文件，无文件直接退出避免清空表单
    const fileInput = document.getElementById("csv");
    if (!fileInput.files || !fileInput.files[0]) {
        return;
    }
    var volunteerQuntity = $('#_volunteerRequestQuntity').val();
    var reader = new FileReader();
    reader.onload = function () {
    　　var data = reader.result;
        // CSVToArray 负责将文件内容转成数组
        participate = CSVToArray(data);
        setCsvValue(participate);
        // 读取完成后清空文件选择框，避免重复触发同文件上传
        fileInput.value = '';
    };
    reader.readAsText(fileInput.files[0], 'BIG5');
}

function setCsvValue(participate) {
    // 循环变量声明为局部变量，避免全局污染
　　for(let i = 1; i < participate.length; i++) {
    　　const nameId = "SelPitem2_name" + i;
        const phoneId = "SelPitem2_phone" + i;
        const emailId = "SelPitem2_email" + i;
        const idId = "SelPitem2_ID" + i;
        const birthdayId = "SelPitem2_birthday" + i;
        // 赋值前先判断DOM存在、且CSV对应值有效才赋值，不会覆盖用户原有输入
        if ($("#" + nameId).length && participate[i][0] !== undefined) {
            $("#" + nameId).val(participate[i][0]);
        }
        if ($("#" + phoneId).length && participate[i][1] !== undefined) {
            $("#" + phoneId).val(participate[i][1]);
        }
        if ($("#" + emailId).length && participate[i][2] !== undefined) {
            $("#" + emailId).val(participate[i][2]);
        }
        if ($("#" + idId).length && participate[i][3] !== undefined) {
            $("#" + idId).val(participate[i][3]);
        }
        if ($("#" + birthdayId).length && participate[i][4] !== undefined) {
            $("#" + birthdayId).val(participate[i][4]);
        }
　　}
}

额外检查项 #

• 确认id为csv的文件选择框仅绑定了change事件触发csvUpload，不要绑定到表单的input、click等全局事件
• 如果你的CSV没有表头行，把循环的起始值i=1改成i=0即可

内容的提问来源于stack exchange，提问作者ChaCha