触发javascript事件的onchange事件<input type=“file”/>

Question

我有这个代码

<input id="fileupload" 
       type="file" name="files[]" 
       class="inputFile clickable" 
       onchange="uploadFile(this.value)"/>

这在第二次使用它时效果很好，即，第一次我选择文件时，不会触发onchange事件，但是第二次选择文件时效果很好。

我有什么可以改变的吗？

我努力了：

• onlclick （无效，在选择文件前触发）
  
• onblur （不起作用，根本不会触发，即使这样做，也只是愚蠢地单击页面上的其他位置来触发操作）
  
• onselect （无效）
  

附加信息：如果我使用onchange=alert(this.value)它可以正常工作

这是我的JavaScript代码

function uploadFile(value) {
     alert(value); //works fine
    $('#fileupload').fileupload({
        dataType: 'json',
        url: 'fileUpload.php',
        type: 'POST',
        limitConcurrentUploads: 1,
//        done: function (e, data) {
//            $.each(data.result, function (index, file) {
//                $('<p/>').text(file.name).appendTo(document.body);
//            });
//        },
        success: function() {
            showMultipleDataDiv(value); //but I don't get value here
        }
    });
}

Answer 1

用户选择文件后，代码$('#fileupload').fileupload将触发文件上传。 您需要在用户选择文件之前运行此代码，因为它会将事件侦听器添加到输入标签。 由于您仅在用户选择文件后运行此代码，因此它将仅在第二次运行。

这是您使其工作所需要做的更改

$(function () {
  $('#fileupload').fileupload({
    dataType: 'json',
    url: 'fileUpload.php',
    type: 'POST',
    limitConcurrentUploads: 1,
    //        done: function (e, data) {
    //            $.each(data.result, function (index, file) {
    //                $('<p/>').text(file.name).appendTo(document.body);
    //            });
    //        },
    success: function () {
      showMultipleDataDiv(value); //but I don't get value here
    }
  });
});

注意，无需在change事件中添加代码。 该插件将为您做到这一点。

您可以在此处了解更多信息： https : //github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin