Question

我正在尝试使用JavaScript实现文件上传，并将上传的图像传递给支持bean值以存储它。该页面是Primefaces Mobile的移动网页。

以下是我的jsf-Page：

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

bean看起来如下：

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

    public String getImageData() {
        return imageData;
    }

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

选择图像后，输入字段显示该值，但从不调用“setImageData”，因此我无法使用此处的数据。那么如何才能调用setter？

Tutorial from HTML5Rocks

Pass variables from client side to server side from BalusC

Answer 1

您的问题是由JSF不知道应该做任何事情引起的。 HTML就是它输出的内容，它不会理解您希望在修改输入字段时更改TestBean#imageData的值。

尝试将输入字段更改为JSF组件：

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

您需要调整Javascript以适应更改后的ID。

Answer 2

我终于找到了错误。表单提交缺失。

所以在“handleFileSelect”中 - 方法我必须添加：

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

将变量从Javascript传递到Bean时未调用Setter

2 个答案: