Question

我在输入类型文件中有一个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);
});

我也有一个onclick事件，我有一个ajax将数据发送到我保存信息的php文件

我是这样做的

$(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事件中使用数据？我的意思是如何才能从onchange事件中访问数据onclick甚至？怎么可能有任何想法被赞赏

UPDATE

HTML

<input type="file" id="image" accepts=".pdf" />
<input type='text'  id="filename" name='filename' maxlength="15" value="" class=' InputBoxF'/>

Answer 1

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

(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! ');
      }

  });

});

})();

但是，如果变量具有正确的值

，则可能必须检查点击处理程序

修改
修复了你的ajax代码添加了自我调用功能

Answer 2

正如Fuzzyma所建议的，一个解决方案可能是制作全局变量。我想提出的是，使用data传递custom events。我已经做了一个简单的小提示来解释这个概念，并使用了一个伪数据来传递。看看下面的小提琴：

http://jsfiddle.net/da833p6j/1/

$("#image").on("change", function(e) {
//DummyData
var datafile = {
        "filename":'xyz',
        "filetype":'txt',
        "filesize": '2KB'
        };
 var e = $.Event("passData");
//Trigger the custom event along with the dummyData
$(this).trigger(e,[datafile] );
});
$(document).on('passData', function(e, param){
   //Attaching passed data to DOM Element
   $('#filename').data('someData', param);
});
$('#add').on("click", function(){
  var fileData= $('#filename').data('someData');
  $.ajax({
  type: 'POST',
  url: '../include/save.php',
  dataType: "json",
  data : fileData,
  success: function(data) {
      console.log(data);

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

  });
});

要详细了解jquery中的custom events，您可以查看此链接CreateEvent

onchange中的数据被移动/传递给onclick

2 个答案: