JavaScript Ereignisbehandlung und Firefox

Question

Ich habe ein Formular auf meiner Website, die Besucher Medien mit dem Filestack/filepicker.io API (filestack.com) hochladen können. Nachdem der Upload erfolgreich abgeschlossen wurde, gibt Filestack ein JSON-Objekt zurück, das Details zum Upload bereitstellt.

Es funktioniert in Chrome, Safari, iOS, funktioniert jedoch nicht in Firefox. In Firefox erzeugt es diesen Fehler: ReferenceError: Ereignis ist nicht definiert

Mein Verständnis ist, dass Firefox Ereignisse anders als Browser mit Webkit behandelt (siehe diesen Artikel: ReferenceError: event is not defined error in Firefox), aber meine Javascript-Fähigkeiten sind nicht genug entwickelt, um mir bei der Fehlersuche zu helfen das ohne Hilfe.

Ich benutze ein onchange-Ereignis, das die Funktion löst setVideoUrl(); Kann mir jemand helfen, zu verstehen, wie ich diesen Code aktualisieren kann, damit er Event-Handler korrekt deklariert und in Firefox funktioniert?

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

Update: ich nun den Code verwenden jedoch unten, wenn die Medien auf Dateistapel hochgeladen und es gibt die JSON die Funktion nie in jedem Browser auslöst.

<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

Verwenden Sie die jQuery on Methode anstelle von Ereignis in-HTML mit Attributen:

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

});