其實現(xiàn)代碼位置如下:
/** * 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 文件里,根據(jù) key FILEUPLOAD_BROWSE
讀取其對應(yīng)值,結(jié)果為 Browse...
這個字符串。
上圖 1854 行的三元表達(dá)式,代表的邏輯是,如果從 library 文件里根據(jù) key FILEUPLOAD_BROWSE
讀取失敗,則返回硬編碼的默認(rèn)值 Browse...
SAP UI5 FileUploader 控件所屬的 sap.ui.unified 整個庫的資源文件位置:https://sapui5.hana.ondemand.com/resources/sap/ui/unified/messagebundle_en_US.properties
關(guān)于 SAP UI5 全球化,多語言和翻譯的支持,請參閱 Jerry 的教程:SAP UI5 應(yīng)用開發(fā)教程之八 - 多語言的支持
在 FileUploader 的 onAfterRendering 鉤子里,執(zhí)行 prepareFileUploadAndIFrame
:
首先為 file upload 做準(zhǔn)備:
不要把這個 this.oFileUpload
同之前的 this.oFilePath 相混淆。
這個 aFileUpload 是存儲最后渲染出原生 HTML 源代碼的場所。
最后生成的源代碼:
'<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 面板里位置如下:
最后 this.oFileUpload 指向 jQuery 通過 css 選擇器返回的 dom 實例:
也就是這個 input 字段:
<input type="file" aria-hidden="true" name="myFileUpload" id="__xmlview0--fileUploader-fu" tabindex="-1" size="1" title="Upload your file to the local server">
創(chuàng)建隱藏的 iframe
,并且插入到 static area 里:
給這個隱藏的 iframe 注冊 load 事件:
點擊 Browse...
按鈕之后,會彈出選擇本地文件的對話框:
然后觸發(fā) handlechange,使用 var uploadForm = this.getDomRef("fu_form");
拿到 form 實例:
通過事件對象的 target.files
字段,拿到用戶選擇好的本地文件。
拋出一個 change 事件:
聯(lián)系客服