jQuery函数间变量传递问题：文件变量无法正确传递

我明白你现在遇到的困扰——明明在文件上传的change事件里给resume赋值了，结果点击按钮输出的还是初始值'Res'。这其实是变量作用域在搞鬼，咱们一步步来拆解和解决。

问题根源：重复声明的局部变量覆盖了全局变量 #

你最开始声明的var resume = 'Res';是全局作用域的变量，但在两个事件函数里，你都用var重新声明了同名变量：

• 在resumeUpload.onchange里，var resume = $('#fileup2')[0].files[0];会在这个函数的局部作用域创建一个新的resume，和全局的那个完全是两个独立变量，所以你修改的只是局部变量，全局的resume根本没被更新。
• 同样，在.remove-resume的点击事件里，var resume = '';也是创建了局部变量，对全局变量没有任何影响。

解决方案1：直接修改全局变量（去掉局部的var） #

把事件函数里的var关键字去掉，直接赋值给全局的resume：

var resume = 'Res';
resumeUpload.onchange = function() {
  // 去掉var，直接操作全局的resume变量
  resume = $('#fileup2')[0].files[0];
  var imageName = $('#fileup2')[0].files[0].name;
  $('.resume').append(`<li><span class="remove-file remove-resume btn f-20 mr-2">X</span>&nbsp;<span>${imageName}</span></li>`);
}
$(document).on('click','.remove-resume',function(){
  $('.resume').html('');
  // 同样去掉var，修改全局变量
  resume = '';
});
$('.applyTeacher').on('click', function () {
  console.log(resume)
});

解决方案2：用状态对象管理（更推荐，避免全局变量污染） #

如果不想直接用全局变量，可以创建一个专门的状态对象来存储跨事件共享的数据，这样代码更清晰，也不容易出现变量冲突：

// 用对象统一管理表单状态
var formState = {
  resume: 'Res'
};

resumeUpload.onchange = function() {
  formState.resume = $('#fileup2')[0].files[0];
  var imageName = $('#fileup2')[0].files[0].name;
  $('.resume').append(`<li><span class="remove-file remove-resume btn f-20 mr-2">X</span>&nbsp;<span>${imageName}</span></li>`);
}
$(document).on('click','.remove-resume',function(){
  $('.resume').html('');
  formState.resume = '';
});
$('.applyTeacher').on('click', function () {
  console.log(formState.resume)
});

额外小提示 #

你的原代码最后.applyTeacher的点击事件少了一个闭合的)，我在修改后的代码里已经补上了，不然会导致语法错误哦～

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