如何在XPages中制作更好的文件上傳控件

Question

我試圖通過隱藏丑陋的文件上傳按鈕來使上傳控件更好。 使用下面的代碼，我設法隱藏了文件上傳控件，並提供了用戶可以單擊的鏈接，效果很好！ 但我還需要通知用戶已選擇了文件。

在提交表單之前，如何保留用戶選擇的文件名？

XSP

 <xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:label id="label2" for="fileUpload1">
        <i class="fa fa-image"></i>
        &#160;
        <i class="fa fa-paperclip"></i>
        <xp:fileUpload id="fileUpload1" value="#{newtopic.Body}"
            style="display:none">
        </xp:fileUpload>
    </xp:label>
 </xp:view>

還嘗試了以下

var fileUpload1:com.ibm.xsp.component.xp.XspFileUpload = getComponent("fileUpload1");
getComponent("computedField1").setValue("FN= " + fileUpload1.getFilename())

Answer 1

在客戶端，您可以通過在輸入元素上添加onchange處理程序來獲取選擇上傳的文件的名稱：

var eInput=document.getElementById("idOfInputControl");
eInput.addEventListener("change",function(){
    var i,filename,files;
    files=this.files;
    for (i=0;i<files.length;i++) {
        filename=files[i].name;
        // do whatever you want with the filename
    }
})

Answer 2

看一下Twitter Bootstrap文件輸入。 它將一個普通的文件輸入選擇器變成一個漂亮的按鈕（具有Bootstrap樣式）： http : //gregpike.net/demos/bootstrap-file-input/demo.html 。 它在按鈕旁邊或按鈕內部顯示所選文件的名稱。

一種簡單的使用方式是設置所有文件選擇器的樣式：

$(document).ready( 
    function() {
        // Style the file button
        $('input[type=file]').bootstrapFileInput();
    }
);

使用Javascript，您可以通過使用files屬性來保留所選文件。 這是一個使用jQuery的簡單示例：

var selectedFile = $('input[type=file]').val()

Answer 3

還可以查看David Leedy的NotesIn9，該文件允許上傳多個文件。 http://www.notesin9.com/2016/08/25/notesin9-194-upload-files-with-plupload/