Clientseitige Validierung unter <h:inputFile>

Meine JSF-Ansicht lädt eine Datei mit der einfachen <h:inputFile>. Es hat eine AJAX-Aktion, um mit dem Hochladen zu beginnen, sobald eine Datei ausgewählt wurde (onchange Ereignis). Ich würde gerne eine grundlegende Validierung der Datei, mit der HTML5 DOM File API und Javascript, auf der Client-Seite zu Stop Upload in bestimmten Fällen.Clientseitige Validierung unter <h:inputFile>

(Ja, ich verstehe, dass Javascript mit diesem Check umgangen werden kann, dies ist nur eine "Bandbreite und Zeit sparen" für normale Benutzer, die versehentlich die falsche Datei wählen - es wird noch serverseitige Validierungen geben ich verstehe auch, dass der Datei-API auf allen (älteren) Browsern noch nicht verfügbar sein kann)

Vereinfachte JSF-Datei:.

<html 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
> 
<h:head> 
    <h:outputScript target="body"> 
//<![CDATA[ 
function doUpload(data, event) { 
    if ("event" == data.type) { 
     switch (data.status) { 
      case "begin": 
       // validate file size 
       if (data.source.files[0].size > 20971520) { //20MiB 
        alert('ERROR: File too big!'); 
        event.preventDefault(); 
        return false; 
       } 
       // TODO show throbber 
       break; 

      case "complete": 
       // TODO hide throbber 
       break; 

      case "success": 
       break; 
     } 
    } 
} 
//]]> 
    </h:outputScript> 
</h:head> 
<h:body> 
    <h:form id="testuploadform" enctype="multipart/form-data"> 
     <h:inputFile id="uploadFile" name="uploadFile" value="#{testBean.uploadFile}"> 
      <!-- TODO validator/s for server-side validation --> 
      <f:ajax event="change" listener="#{testBean.ajaxLst_autoUpload}" 
        onevent="function(data){ doUpload(data,event); }" 
      /> 
     </h:inputFile> 
    </h:form> 
</h:body> 
</html>

Es scheint, dass der event.preventDefault() Anruf trotz verwenden, die Veranstaltung noch weiter behandelt wird : Die Datei ist hochgeladen und meine Listener-Funktion TestBean.ajaxLst_autoUpload() ist in der Lage, es zu erhalten und zu tun arbeite daran.

Ist was ich versuche zu tun, sogar möglich? Und wie gehe ich vor?

====

Ich denke, eine andere Herangehensweise an use the XMLHttpRequest.open() process to issue a request from AJAX wäre (nur einmal Validierung erfolgreich ist), ich bin aber nicht sicher, wie man würde eine „gültige“ do POST Anfrage zu JSF - I' Ich habe nur Beispiele für PHP und Java Servlets gesehen. Ich bin nicht primär daran interessiert, ein Upload-Servlet zu schreiben (obwohl es bei Bedarf gemacht werden kann und Beispiele gegoogelt werden können), und ich kenne JSF nicht zu gut, um zu wissen, wie das einem Servlet entsprechen würde. Aber irgendwelche Hinweise in dieser Hinsicht würden auch geschätzt werden.

Quelle

2016-06-01 fr13d

Handhabung in <f:ajax onevent> ist zu spät. Verwenden Sie stattdessen das Attribut onchange der Eingabekomponente. Grundsätzlich:

<h:inputFile ... onchange="return validate(this)">

Quelle

2016-06-01 11:04:43 BalusC

Nochmals vielen Dank, @BalusC. Scheint danach offensichtlich, aber 'validate()' sollte 'true' oder' false' zurückgeben, und der Handler sollte auch diesen Wert zurückgeben ... Ich habe den Teil vermisst, der mit dieser Idee herumspielt. – fr13d

Clientseitige Validierung unter <h:inputFile>

Antwort

Verwandte Themen