將變量從Javascript傳遞給Bean時Setter沒有調用

我試圖用JavaScript實現文件上傳，並將上傳的圖像傳遞給後臺bean值以存儲它。該頁面是Primefaces Mobile的移動網頁。將變量從Javascript傳遞給Bean時Setter沒有調用

以下是我的JSF頁：

<f:view xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:p="http://primefaces.org/ui" 
    xmlns:fn="http://java.sun.com/jsp/jstl/functions" 
    xmlns:pm="http://primefaces.org/mobile" 
    contentType="text/html" 
    renderKitId="PRIMEFACES_MOBILE"> 

<style type="text/css"> 
.invisible *{ 
    display:none; 
} 
</style> 
<pm:page title="" swatch="a"> 
    <pm:view id="main"> 
     <pm:content> 
      <h:form id="imageForm"> 
       <p:commandLink immediate="true" value="Select image" onclick="onClickTakeCam();"/> 
       <h:panelGroup styleClass="invisible"> 
        <input type="file" id="files" name="files[]" multiple="multiple" /> 
       </h:panelGroup> 
       <input value="#{testBean.imageData}" type="text" id="inputId" /> 
      </h:form> 
      <script> 
       function onClickTakeCam() { 
        $("#files").click(); 
       } 
       function handleFileSelect(evt) { 
        var files = evt.target.files; // FileList object 

        // Loop through the FileList and render image files as thumbnails. 
        for (var i = 0, f; f = files[i]; i++) { 

          // Only process image files. 
          if (!f.type.match('image.*')) { 
          continue; 
          } 
         var reader = new FileReader(); 
         // Closure to capture the file information. 
         reader.onload = (function(theFile) { 
          return function(e) { 
           var result = e.target.result; 
           var input = document.getElementById('inputId'); 
           input.value = result; 
          }; 
          })(f); 
          // Read in the image file as a data URL. 
         reader.readAsDataURL(f); 
        } 
       } 
       document.getElementById('files').addEventListener('change', handleFileSelect, false); 
      </script> 
    </pm:content> 
    </pm:view> 
</pm:page>

豆子看起來如下：圖像選擇

@ManagedBean 
@SessionScoped 
public class TestBean{ 
    private String imageData; 
    public TestBean() { } 

    public String getImageData() { 
     return imageData; 
    } 

    public void setImageData(String imageData) { 
     this.imageData = imageData; 
    } 
}

後輸入字段顯示的值，但「setImageData」永遠不會被調用，所以我不能使用這裏的數據。那麼我怎樣才能讓二傳被調用呢？

Tutorial from HTML5Rocks

Pass variables from client side to server side from BalusC

來源

2014-02-13 Thomas Rüping

是您的豆真正缺少'@ ManagedBean' /'@ Named'？ – mabi

沒有抱歉，我編輯了我的問題。 –

你的問題是由JSF引起了不知道它應該做任何事情。 HTML就是它輸出的內容，它不會瞭解，當您修改輸入字段時，您希望TestBean#imageData的值發生更改。

試着改變你的輸入字段的JSF組件：

<h:inputText id="testId" value="#{testBean.imageData}" />

您需要調整您的Javascript功能來適應變化的ID。

來源

2014-02-13 10:51:12 mabi

不幸的是，將更改爲並沒有改變任何內容。該setter不叫。 –

我終於找到了錯誤。表單提交失蹤。

所以在「handleFileSelect」 - 方法我不得不添加：

document.getElementById('imageForm').submit();

來源

2014-02-14 09:59:18

如果您將'testId'作爲一個簡單的''元素，它會起作用嗎？ – mabi

是的，它工作正常。沒有jsf組件需要。 –

將變量從Javascript傳遞給Bean時Setter沒有調用

回答

相關問題