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

时间:2012-09-12 08:23:55

标签: javascript jquery html input blueimp

我有这段代码

<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
        }
    });
}

1 个答案:

答案 0 :(得分: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