0

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

以下是我的 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>

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 被调用呢？

HTML5Rocks 教程

从 BalusC 将变量从客户端传递到服务器端

4

2 回答 2

0

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

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

document.getElementById('imageForm').submit();
于 2014-02-14T09:59:18.647 回答
0

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

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

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

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

于 2014-02-13T10:51:12.890 回答