如何在 XPages 中制作更好的文件上传控件
How to make a nicer file upload control in XPages
我试图通过隐藏丑陋的文件上传按钮来实现更好的上传控制。
使用下面的代码我设法隐藏了文件上传控件并提供了一个 link 用户可以点击,效果很好!但我还需要通知用户已选择文件。
如何获取用户在提交表单前选择的文件名?
XSP
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:label id="label2" for="fileUpload1">
<i class="fa fa-image"></i>
 
<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())
看看 Twitter Bootstrap 文件输入。它将一个普通的文件输入选择器变成一个漂亮的按钮(具有 Bootstrap 样式):http://gregpike.net/demos/bootstrap-file-input/demo.html。它在按钮旁边或按钮内部显示所选文件的名称。
一个简单的使用方法是设置所有文件选择器的样式:
$(document).ready(
function() {
// Style the file button
$('input[type=file]').bootstrapFileInput();
}
);
使用 Javascript 您可以通过使用文件 属性 来获取选定的文件。这是一个使用 jQuery:
的简单示例
var selectedFile = $('input[type=file]').val()
另请查看 David Leedy 的 NotesIn9,它允许上传多个文件。
http://www.notesin9.com/2016/08/25/notesin9-194-upload-files-with-plupload/
在客户端,您可以通过向输入元素添加 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
}
})
我试图通过隐藏丑陋的文件上传按钮来实现更好的上传控制。 使用下面的代码我设法隐藏了文件上传控件并提供了一个 link 用户可以点击,效果很好!但我还需要通知用户已选择文件。
如何获取用户在提交表单前选择的文件名?
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:label id="label2" for="fileUpload1">
<i class="fa fa-image"></i>
 
<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())
看看 Twitter Bootstrap 文件输入。它将一个普通的文件输入选择器变成一个漂亮的按钮(具有 Bootstrap 样式):http://gregpike.net/demos/bootstrap-file-input/demo.html。它在按钮旁边或按钮内部显示所选文件的名称。
一个简单的使用方法是设置所有文件选择器的样式:
$(document).ready(
function() {
// Style the file button
$('input[type=file]').bootstrapFileInput();
}
);
使用 Javascript 您可以通过使用文件 属性 来获取选定的文件。这是一个使用 jQuery:
的简单示例var selectedFile = $('input[type=file]').val()
另请查看 David Leedy 的 NotesIn9,它允许上传多个文件。 http://www.notesin9.com/2016/08/25/notesin9-194-upload-files-with-plupload/
在客户端,您可以通过向输入元素添加 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
}
})