其實現程式碼位置如下：

```javascript
	/**
	 * 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...` 這個字串。

![](https://img-blog.csdnimg.cn/img_convert/af3576e71c63e09ca7a0a31a37fdd0f8.png)

上圖 1854 行的三元表示式，代表的邏輯是，如果從 library 檔案里根據 key `FILEUPLOAD_BROWSE` 讀取失敗，則返回硬編碼的預設值 `Browse...`

![](https://img-blog.csdnimg.cn/img_convert/f9ae9cbc79c99c8b48a9a045e5d50216.png)

SAP UI5 FileUploader 控制元件所屬的 sap.ui.unified 整個庫的資原始檔位置：https://sapui5.hana.ondemand.com/resources/sap/ui/unified/messagebundle_en_US.properties

關於 SAP UI5 全球化，多語言和翻譯的支援，請參閱 Jerry 的教程：[SAP UI5 應用開發教程之八 - 多語言的支援](https://jerry.blog.csdn.net/article/details/121039416)

在 FileUploader 的 onAfterRendering 鉤子裡，執行 `prepareFileUploadAndIFrame`：

![](https://img-blog.csdnimg.cn/img_convert/ede0f94ad703729c56c2dbd6db671055.png)

首先為 file upload 做準備：
![](https://img-blog.csdnimg.cn/img_convert/0b4ea3d634bd8a85d2ee41caebaafd4f.png)

不要把這個 `this.oFileUpload` 同之前的 this.oFilePath 相混淆。

![](https://img-blog.csdnimg.cn/img_convert/19735b5824b0f9bf94caca0f4cb134ae.png)

這個 aFileUpload 是儲存最後渲染出原生 HTML 原始碼的場所。

最後生成的原始碼：

![](https://img-blog.csdnimg.cn/img_convert/53a37ffefa3ecb131c9615cda880ac92.png)

```javascript
'<input>'
```

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

上面程式碼透過 jQuery 程式碼查詢的 css 類：`sapUiFupInputMask`，在 elements 皮膚裡位置如下：
![](https://img-blog.csdnimg.cn/img_convert/d9e42a5b30cf2329b109af9dc561554b.png)

最後 this.oFileUpload 指向 jQuery 透過 css 選擇器返回的 dom 例項：

![](https://img-blog.csdnimg.cn/img_convert/7e2e59ebf015cc4d727011fe7ea08696.png)

也就是這個 input 欄位：
![](https://img-blog.csdnimg.cn/img_convert/3336ce898ecb6bbc2c76c2ae6e2a121f.png)

```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">
```

建立隱藏的 `iframe`，並且插入到 static area 裡：

![](https://img-blog.csdnimg.cn/img_convert/134939fea89393e3741c5af00f1eb67e.png)

給這個隱藏的 iframe 註冊 load 事件：
![](https://img-blog.csdnimg.cn/img_convert/81ae6afd28c6a32e4d47e256cfcad0c0.png)

![](https://img-blog.csdnimg.cn/img_convert/e865d4d352ac8ecda903c58638f13d4d.png)

點選 `Browse...` 按鈕之後，會彈出選擇本地檔案的對話方塊：
![](https://img-blog.csdnimg.cn/img_convert/86ee1ad57e781bde7b2af76b945054ed.png)

然後觸發 handlechange，使用 `var uploadForm = this.getDomRef("fu_form");` 拿到 form 例項：
![](https://img-blog.csdnimg.cn/img_convert/9b2f590f865a4af00b16c0cf3167a5bf.png)

透過事件物件的 `target.files` 欄位，拿到使用者選擇好的本地檔案。

![](https://img-blog.csdnimg.cn/img_convert/6221a5f41a8193408fe43121e706d6a2.png)

丟擲一個 change 事件：
![](https://img-blog.csdnimg.cn/img_convert/73d7d14aecaf96a014df10ab525b6917.png)

SAP UI5 FileUploader 的隱藏 iframe 設計明細

相關文章