0
点赞
收藏
分享

微信扫一扫

SAP UI5 FileUploader 的隐藏 iframe 设计明细


其实现代码位置如下:

/**
* Helper to retrieve the I18N texts for a button
* @private
*/
FileUploader.prototype.getBrowseText = function() {

// as the text is the same for all FileUploaders, get it only once
if (!FileUploader.prototype._sBrowseText) {
var rb = sap.ui.getCore().getLibraryResourceBundle("sap.ui.unified");
FileUploader.prototype._sBrowseText = rb.getText("FILEUPLOAD_BROWSE");
}

return FileUploader.prototype._sBrowseText ? FileUploader.prototype._sBrowseText : "Browse...";

};

从上图可以看出,SAP UI5 框架从一个 library 文件里,根据 key ​​FILEUPLOAD_BROWSE​​​ 读取其对应值,结果为 ​​Browse...​​ 这个字符串。

SAP UI5 FileUploader 的隐藏 iframe 设计明细_javascript

上图 1854 行的三元表达式,代表的逻辑是,如果从 library 文件里根据 key ​​FILEUPLOAD_BROWSE​​​ 读取失败,则返回硬编码的默认值 ​​Browse...​

SAP UI5 FileUploader 的隐藏 iframe 设计明细_开发语言_02

SAP UI5 FileUploader 控件所属的 sap.ui.unified 整个库的资源文件位置:https://sapui5.hana.ondemand.com/resources/sap/ui/unified/messagebundle_en_US.properties

关于 SAP UI5 全球化,多语言和翻译的支持,请参阅 Jerry 的教程:SAP UI5 应用开发教程之八 - 多语言的支持

在 FileUploader 的 onAfterRendering 钩子里,执行 ​​prepareFileUploadAndIFrame​​:

SAP UI5 FileUploader 的隐藏 iframe 设计明细_sap_03

首先为 file upload 做准备:

SAP UI5 FileUploader 的隐藏 iframe 设计明细_开发语言_04

不要把这个 ​​this.oFileUpload​​ 同之前的 this.oFilePath 相混淆。

SAP UI5 FileUploader 的隐藏 iframe 设计明细_开发语言_05

这个 aFileUpload 是存储最后渲染出原生 HTML 源代码的场所。

最后生成的源代码:

SAP UI5 FileUploader 的隐藏 iframe 设计明细_sap_06

'<input ', 'type="file" ', 'aria-hidden="true" ', 'name="myFileUpload" ', 'id="__xmlview0--fileUploader-fu" ', 'tabindex="-1" ', 'size="1" ', 'title="Upload your file to the local server" ', '>'

this.oFileUpload = jQuery(aFileUpload.join("")).prependTo(this.$().find(".sapUiFupInputMask")).get(0);

上面代码通过 jQuery 代码查找的 css 类:​​sapUiFupInputMask​​,在 elements 面板里位置如下:

SAP UI5 FileUploader 的隐藏 iframe 设计明细_开发语言_07

最后 this.oFileUpload 指向 jQuery 通过 css 选择器返回的 dom 实例:

SAP UI5 FileUploader 的隐藏 iframe 设计明细_javascript_08

也就是这个 input 字段:

SAP UI5 FileUploader 的隐藏 iframe 设计明细_javascript_09

<input type="file" aria-hidden="true" name="myFileUpload" id="__xmlview0--fileUploader-fu" tabindex="-1" size="1" title="Upload your file to the local server">

创建隐藏的 ​​iframe​​,并且插入到 static area 里:

SAP UI5 FileUploader 的隐藏 iframe 设计明细_sap_10

给这个隐藏的 iframe 注册 load 事件:

SAP UI5 FileUploader 的隐藏 iframe 设计明细_开发语言_11

SAP UI5 FileUploader 的隐藏 iframe 设计明细_ui_12

点击 ​​Browse...​​ 按钮之后,会弹出选择本地文件的对话框:

SAP UI5 FileUploader 的隐藏 iframe 设计明细_开发语言_13

然后触发 handlechange,使用 ​​var uploadForm = this.getDomRef("fu_form");​​ 拿到 form 实例:

SAP UI5 FileUploader 的隐藏 iframe 设计明细_javascript_14

通过事件对象的 ​​target.files​​ 字段,拿到用户选择好的本地文件。

SAP UI5 FileUploader 的隐藏 iframe 设计明细_开发语言_15

抛出一个 change 事件:

SAP UI5 FileUploader 的隐藏 iframe 设计明细_javascript_16


举报

相关推荐

0 条评论