客戶端驗證<h:inputFile>

我的JSF視圖使用普通的<h:inputFile>上傳文件。它有一個AJAX動作，在選擇文件後立即開始上傳（onchange事件）。我想對文件做一些基本的驗證，使用HTML5 DOM File API和Javascript，在客戶端對停止上傳，在某些情況下。（是的，我明白，使用此檢查的Javascript可以繞開，這對於意外選擇錯誤文件的普通用戶來說只是一個「帶寬和時間檢查」 - 仍然會有服務器端驗證。我也明白，文件API可能還沒有適用於所有（以上）的瀏覽器）客戶端驗證<h:inputFile>

簡化JSF文件：

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

看來，儘管使用event.preventDefault()呼叫，事件還在進一步處理：文件已上傳，我的偵聽器功能TestBean.ajaxLst_autoUpload()能夠獲取並執行在...上下功夫。

我試圖做甚至可能嗎？我該怎麼做呢？

====

我想不同的辦法是use the XMLHttpRequest.open() process to issue a request from AJAX（只有一次驗證成功），我不確定但是一個會怎麼做一個「有效」 POST要求到JSF - I'我只看到了PHP和Java Servlets的例子。我不是主要熱衷於編寫上傳Servlet（儘管如果需要可以完成此操作並且可以使用示例進行搜索），並且我也不太瞭解JSF，因此無法知道它將如何與Servlet對應。但是，任何在這方面的指針也將不勝感激。

來源

2016-06-01 fr13d

在<f:ajax onevent>中處理爲時已晚。改爲使用輸入組件的onchange屬性。基本上：

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

來源

2016-06-01 11:04:43 BalusC

再次感謝你，@BalusC。看起來很明顯，但是當然'validate（）'應該返回'true'或'false'，並且處理程序也應該返回該值......我錯過了那個玩弄這個想法的部分。 – fr13d

客戶端驗證<h:inputFile>

回答

相關問題