Javascript onchange中要移动/传递到onclick的数据

我在输入类型文件中有一个on事件，我是这样做的

$("#image").on("change", function(e) {
    var name = $("#filename").val();
        var file = e.target.files[0];
        var filename = name.length > 1 ? name  : file.name;
        var filetype = file.type;
        var filesize = file.size;
        var datafile = {
            "filename":filename,
            "filetype":filetype,
            "filesize":filesize
            };
        console.log(datafile);
        console.log(file);
});

$(document).on('click', '#add', function() {
  var id= $('#id').val();
  var name = $('#name').val();
  var address= $('#address').val();
$.ajax({
    type: 'POST',
    url: '../include/save.php',
    dataType: "json",
    data: {
        id: id,
        name: name,
        address: address
    },
    success: function(data) {
        console.log(data);

    }

},
error: function(data) {
    alert('Error! ');
}


});});

此外，我还有一个onclick事件，其中我有一个ajax，它将数据发送到一个php文件，我在其中保存信息

我是这样做的

$("#image").on("change", function(e) {
    var name = $("#filename").val();
        var file = e.target.files[0];
        var filename = name.length > 1 ? name  : file.name;
        var filetype = file.type;
        var filesize = file.size;
        var datafile = {
            "filename":filename,
            "filetype":filetype,
            "filesize":filesize
            };
        console.log(datafile);
        console.log(file);
});

$(document).on('click', '#add', function() {
  var id= $('#id').val();
  var name = $('#name').val();
  var address= $('#address').val();
$.ajax({
    type: 'POST',
    url: '../include/save.php',
    dataType: "json",
    data: {
        id: id,
        name: name,
        address: address
    },
    success: function(data) {
        console.log(data);

    }

},
error: function(data) {
    alert('Error! ');
}


});});

我想在onclick中添加onchange中的数据，以便将图像或pdf文件保存在数据库中。我如何使用onchange事件中的数据？我的意思是，我如何能够从onclick访问onchange事件中的数据？这是怎么可能的？任何想法都是值得赞赏的

更新

html

---

您必须在两个函数的外部作用域中声明变量，以便在函数中定义它们

(function(){

var file, filename, filtype, filesize, datafile;

$("#image").on("change", function(e) {
    var name = $("#filename").val();
        file = e.target.files[0];
        filename = name.length > 1 ? name  : file.name;
        filetype = file.type;
        filesize = file.size;
        datafile = {
            "filename":filename,
            "filetype":filetype,
            "filesize":filesize
            };
        console.log(datafile);
        console.log(file);
});

$(document).on('click', '#add', function() {

    // Here you can access the variables now

  var id= $('#id').val();
  var name = $('#name').val();
  var address= $('#address').val();
  $.ajax({
      type: 'POST',
      url: '../include/save.php',
      dataType: "json",
      data: {
          id: id,
          name: name,
          address: address
      },
      success: function(data) {
          console.log(data);

      },
      error: function(data) {
          alert('Error! ');
      }

  });

});

})();

但是，如果变量的值正确，则可能必须签入click处理程序

编辑：
修复了ajax代码

---

正如Fuzzyma所建议的那样，添加了自调用函数，一种解决方案是生成全局变量。我想建议的是，使用

自定义事件传递
数据
。我做了一个简单的小提琴来解释这个概念，并使用了一个虚拟数据来传递。看看下面的小提琴：


要了解更多关于jquery中的
自定义事件
，您可以签出此链接
您也可以发布html吗？你试过输入类型文件上的更改事件了吗？我得到了我想要的结果，长官@kevpoccs我想要的是把结果放在onclick中，将数据保存在数据库中。我想函数必须用phpWhich元素编写，该元素具有id
add
。某种提交按钮？@Rakesh_Kumar是的，当我单击它时，它是一个提交按钮所有数据都将传递到我的php文件中，我将它们保存在那里。没有其他方法吗？将变量设置为全局变量不是一个好主意，对吗？您不必将它们设置为全局变量。将自调用函数用作容器：（function（）{//code}）（）-通过这种方式，您的代码从全局范围中分离出来。您能在回答中显示自调用函数吗？@HogRider编辑了我的回答。当您可以将数据直接传递到元素时，为什么要使用事件？@Fuzzyma，因为对于共享从一个DOM节点生成的数据并由一个DOM节点使用的数据而言，将所有内容设置为全局并不是一个正确的解决方案另一个DOM节点…这两个节点都不是触发事件，而监听该事件只是为了将数据传递给元素，您可以直接这样做，而不是触发事件。顺便说一句：我的回答中从来没有提到任何全球范围。我说的是外部范围@Fuzzyma只是告诉我在某个事件处理程序上生成的数据的情况，对于这些数据，您在开始点不知道..那么在那一点上，您仍然能够为其创建“全局”变量..在这种情况下，您已经创建了许多变量
var file，filename，filtype，filesize，datafile仅因为您有以前的信息。。。。