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

Posted 2023-03-14

【中文标题】触发 <input type="file"/> 的 javascript 事件 onchange 事件

【英文标题】：Fire javascript event onchange event of <input type="file"/>

【发布时间】：2012-09-12 08:23:55

【问题描述】：

我有这个代码

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

【问题讨论】：

类似的线程？ ***.com/questions/2133807/…

是的，但这并没有改变这种情况，我创建了一个新输入，但它仍然在第二次而不是第一次触发。

你能发布你的 Javascript 代码吗？也许那里有一些错误？

你能尝试使用 jquery live 方法，如 $('#fileupload').live('change', function() uploadFile(); );或像 $("#fileupload").change(function() alert('I clicked'); );

如果您有权访问错误日志，请查看它们，否则尝试使用 Chrome 网络控制台（右键单击页面 -> 检查元素 -> 网络选项卡），然后提交上传表单。我认为您的 fileUpload.php 有问题。

【参考方案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
    
  );
);

请注意，无需在更改事件中添加代码。该插件将为您执行此操作。

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