如何在 XPages 中制作更好的文件上传控件答案

【问题标题】：How to make a nicer file upload control in XPages如何在 XPages 中制作更好的文件上传控件
【发布时间】：2017-11-26 05:22:50
【问题描述】：

我试图通过隐藏丑陋的文件上传按钮来更好地控制上传。使用下面的代码，我设法隐藏了文件上传控件并提供了一个用户可以点击的链接，效果很好！但我还需要通知用户一个文件已被选中。

如何在提交表单之前获取用户选择的文件名？

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

【问题讨论】：

也许我的博文可以帮助你，elstarit.nl/2014/07/16/…
您想要回答的实际问题是“如何制作一个不错的文件上传控件？”或“如何在提交前获取文件名？” ?

标签： file-upload xpages xsp

【解决方案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
    }
})

【讨论】：

谢谢，很好的解决方案

【解决方案2】：

还可以查看 David Leedy 的 NotesIn9，它允许上传多个文件。 http://www.notesin9.com/2016/08/25/notesin9-194-upload-files-with-plupload/

【讨论】：

【解决方案3】：

看看 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()

【讨论】：