使用javascript上傳文件並設置為jsf bean屬性

Question

我使用javascript上傳文件，如下所示。

<h:form id="form1">
    <h:inputHidden binding="#{myBean.inputHidden}" value="#{myBean.fileData}" id="hidden2"/>
        <h3>Second way</h3>
        <input id="upload" type="file" onchange="imageChange(this)"/>
        <img src="#" height="150" id="image" />
        <h:commandButton value="submit" action="#{myBean.save()}"/>
    </h:form>
    <script>
    function readPicture(input, output) {
        alert("Helo ");
        if (input.files &amp;&amp; input.files[0]) {

            var reader = new FileReader();
            reader.onload = function(e)
            {               
                output.attr('src', e.target.result);
                alert(e.target.result);
                document.getElementById('form1:hidden2').value = e.target.result;
            };
            reader.readAsDataURL(input.files[0]);
            //reader.readAsArrayBuffer(input.files[0]);
        }
    }
    function imageChange(input) {
        alert("Helo " + input);
        var img = $("#image");
        readPicture(input, img);
    };


</script>

我得到了這樣的結果

數據：圖像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAk8AAAD2CAIAAABA // ...

我使用了readAsDataURL javascript方法來顯示圖像。 我想將結果轉換為字節數組。 有什么辦法可以轉換字節數組嗎？

Answer 1

假設您在服務器端收到了結果（使用變量result ）。

首先，您需要刪除數據URI前綴：

result = result.substring(result.indexOf(','));

然后使用javax.xml.bind.DatatypeConverter將base64轉換為byte []：

byte[] buf = DatatypeConverter.parseBase64Binary(result);

可選地 ，您可以根據需要在客戶端刪除Data URI前綴，而不是在服務器端刪除它（第一步），方法是：

var result = reader.result.slice(reader.result.indexOf(',') + 1);