在<输入类型＝“;文件“/>

Fire javascript event onchange event of <input type="file"/>

本文关键字：文件 gt 类型 lt 输入      更新时间：2023-09-26

我有这个代码

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

一旦用户选择文件，代码$('#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
    }
  });
});

请注意，没有必要在更改事件中添加代码。插件会为你做到这一点。

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

相关文章：