Question

我的网站上有一个表单，允许访问者使用Filestack / filepicker.io API（filestack.com）上传媒体。上传成功后，Filestack将返回一个JSON对象，该对象提供有关上载的详细信息。

适用于Chrome，Safari，iOS，但无法在Firefox中使用。在Firefox中，它会生成此错误：ReferenceError：未定义事件

我的理解是Firefox处理事件的方式与使用Webkit的浏览器不同（请参阅此文章：ReferenceError: event is not defined error in Firefox），但我的javascript技能还不足以帮助我在没有任何帮助的情况下解决这个问题。

我使用触发函数setVideoUrl（）的onchange事件;任何人都可以帮助我了解如何更新此代码，以便它正确地声明事件处理程序并在Firefox中有效吗？

<input type="filepicker" data-fp-apikey="xxx" data-fp-mimetypes="video/*" data-fp-container="modal" data-fp-services="COMPUTER" data-fp-store-location="azure" data-fp-store-container="app1" data-fp-button-text="&nbsp;" data-fp-button-class="select-your-video-button" onclick="uploadVideo()" onchange="return setvideourl();">

function setVideoUrl(){
    var myvideourl = event.fpfile.url;
    var myvideofilename = event.fpfile.filename;

    jQuery("#input_1_14").val(myvideourl);
    jQuery("#input_1_11").val(myvideofilename);

    jQuery("#input_1_11").attr("readonly", true);
    jQuery("#input_1_11").show();
    jQuery("#videochoice").hide();
    jQuery("p.required-field").hide();
    jQuery("#choosedifferentvideo").show();
}

更新：我现在正在使用下面的代码，但是当媒体上传到Filestack并且它返回JSON时，该功能永远不会在任何浏览器中触发。

<input type="filepicker" data-fp-apikey="xxx" data-fp-mimetypes="video/*" data-fp-container="modal" data-fp-services="COMPUTER" data-fp-store-location="azure" data-fp-store-container="app1" data-fp-button-text="&nbsp;" data-fp-button-class="select-your-video-button" onclick="uploadVideo()">


jQuery( 'input[type="filepicker"]' ).on( "change", function(event){
  alert('function triggered');

  var myvideourl = event.fpfile.url;
  var myvideofilename = event.fpfile.filename;

  jQuery( "#input_1_14" ).val( myvideourl );
  jQuery( "#input_1_11" ).val( myvideofilename );

  jQuery( "#input_1_11" ).attr("readonly", true);
  jQuery( "#input_1_11" ).show();
  jQuery( "#videochoice" ).hide();
  jQuery( "p.required-field" ).hide();
  jQuery( "#choosedifferentvideo" ).show();

});

Answer 1

使用jQuery on方法而不是使用in-HTML事件属性：

<input type="filepicker" data-fp-apikey="xxx" data-fp-mimetypes="video/*" data-fp-container="modal" data-fp-services="COMPUTER" data-fp-store-location="azure" data-fp-store-container="app1" data-fp-button-text="&nbsp;" data-fp-button-class="select-your-video-button" onclick="uploadVideo()" />

jQuery( 'input[type="filepicker"' ).on("change", function(event){
    var myvideourl = event.fpfile.url;
    var myvideofilename = event.fpfile.filename;

    jQuery( "#input_1_14" ).val( myvideourl );
    jQuery( "#input_1_11" ).val( myvideofilename );

    jQuery( "#input_1_11" ).attr("readonly", true);
    jQuery( "#input_1_11" ).show();
    jQuery( "#videochoice" ).hide();
    jQuery( "p.required-field" ).hide();
    jQuery( "#choosedifferentvideo" ).show();

});

JavaScript事件处理和Firefox

1 个答案: