Question

我在JavaScript和JSF中上传图片有问题：

在移动网页上，用户可以使用集成摄像头拍摄照片，该照片会立即上传到服务器并存储在MySql数据库中，但有时上传只会停止。发生此问题时，我看不到模式。它大部分时间都有效。

这里是代码：

JSF

<h:form id="imageInputForm">
  <h:panelGroup styleClass="invisible">
    <input type="file" id="files" name="files[]"  accept="image/*;capture=camera" />
    <h:inputHidden value="#{bean.imageData}" type="text" id="inputId" />
  </h:panelGroup>
  <div id="loading" style="display:none; position:absolute; z-index: 5000; margin: 0 auto; width:100%"  >
    <table style="width:100%; height:100%; align:center; text-align:center;">
        <tr>
          <td>
             <img height="130px" width="130px;" src="../../resources/ajaxloading.gif" alt="" />
          </td>
        </tr>
    </table>
  </div>    
</h:form>

<h:form>
   <p:commandLink immediate="true" onclick="onClickTakeCam();">
      <p:graphicImage height="27" width="35" value="/resources/camera_icon.png" style="border: none;" />
  </p:commandLink>
</h:form>   

<style type="text/css">  
    .invisible {
        display:none;
    }
</style>

<script>
    function onClickTakeCam() { 
        $("#files").click();
    }

    function handleFileSelect(evt) {
        $('#loading').show();
        var files = evt.target.files; // FileList object
            for (var i = 0, f; f = files[i]; i++) {
                  if (!f.type.match('image.*')) {
                    continue;
                  }
                 var reader = new FileReader();
                reader.onload = (function(theFile) {
                    return function(e) {
                      var result = e.target.result;
                      var input = document.getElementById("imageInputForm:inputId");
                      input.value = result;
                      document.getElementById('imageInputForm').submit();
                    };
                  })(f);
               reader.readAsDataURL(f); 
            }
        }
        document.getElementById('files').addEventListener('change', handleFileSelect, false);

</script>

豆

public String getImageData() {
    return imageData;
}


public void setImageData(String imageData) {
    if (imageData != null && !imageData.equals(this.getImageData())) {
        this.imageData = imageData;
        imageUploaded();
    } else {
        this.imageData = imageData;
    }
}

public void imageUploaded() {
   byte [] uploadedImage = Base64.decodeBase64(this.getImageData().substring(22));
    //process byte array from here
    //[...]
}

Answer 1

我在你的代码中看到了两个问题。

首先，当您使用FileReader读取文件时，您不会处理错误。您应该设置属性FileReader.onerror和FileReader.onabort。否则，当发生错误或文件读取中止时，没有任何反应，看起来页面已冻结。

第二个问题是以下几行：

<p:commandLink immediate="true" onclick="onClickTakeCam();">

您最好添加return false;或使用onstart。否则，Primefaces会发送一些可能与后续表单提交混合的AJAX请求。

如果修复上述问题无法解决冻结，请提供更多详细信息，包括挂起和执行的内容（例如，是否将请求发送到服务器）。

使用JavaScript和JSF进行图像上传偶尔不起作用

1 个答案: