我們研究 SAP UI5 FileUploader 控制元件渲染時生成的 HTML 原始碼：真正提供給使用者選擇檔案上傳的控制元件，是下圖高亮的這個型別屬性 type 為 file 的 input 控制元件。

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

這個 file input 位於下圖高亮的 form 控制元件，該控制元件的 action 指向檔案伺服器 url：http://localhost:3003/upload, 即接收檔案上傳的伺服器。 target 指向另一個隱藏 iframe 的 id：
![](https://img-blog.csdnimg.cn/img_convert/b1b9ab08e00455a7c16b91672b92fce3.png)

這個隱藏的 iframe 如下圖所示：

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

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

這個 iframe 位於 SAP UI5 框架的 static area 內：
![](https://img-blog.csdnimg.cn/img_convert/55add7442143f43ea9baa069f389e4b0.png)

關於 form 的 target 屬性：

- target 屬性指定一個名稱或關鍵字，指示在哪裡顯示提交表單後收到的響應。

- 目標屬性定義瀏覽上下文（例如選項卡、視窗或內聯框架）的名稱或關鍵字。

target 的值可能有以下幾種：
![](https://img-blog.csdnimg.cn/img_convert/3cbe6698bc67a57143e2c46a30e509e3.png)

SAP UI5 使用的是最後一種，指向一個透過 id 屬性指明的 iframe.

form 的 action 屬性：提交表單時將表單資料傳送到哪裡。

可能的值：

- 絕對 URL - 指向另一個網站（如 action="http://www.example.com/example.htm"）
- 相對 URL - 指向網站內的檔案（如 action="example.htm"）

SAP UI5 XML 檢視裡建議使用第二種，更加靈活。

有的開發者可能覺得疑惑，為什麼在檔案上傳的場景裡，需要一個隱藏的 iframe？實際上，我們需要一個 iframe 在不離開當前頁面的情況下上傳檔案(比如 Ajax).

現代瀏覽器支援 FormData，它允許開發者使用 XMLHttpRequest 上傳檔案。

# 總結

使用 iframe + input 進行檔案上傳的步驟。首先定義 form 和 iframe 元素：

```html
<div id="status"></div>
<form id="file-upload-form" name="file-upload-form">
   <input type="file" id="upload-doc-file" name="upload-doc-file">
</form>

```javascript
iframeSubmitFile: function() {
//adds a spinning loading icon.  Icon is from font awesome
this.$el.find("#status").html("<i class="icon-spinner icon-spin loading"> </i>");

var form = $('#file-upload-form');
        form.attr("action", "/user-upload-doc");
        form.attr("method", "post");
        form.attr("enctype", "multipart/form-data");
        form.attr("target", "postiframe");
        //form.attr("target", iframe);
        form.attr("file", this.$el.find('#upload-doc-file').val());

//example of how to add another value to the post field
        var audit_id = 5;
        //dynamically create an input value for the form post
        var audit_id_input = $("<input>").attr("type", "hidden").attr("name", "audit_id").val(audit_id);

//add it to the form
        form.append($(audit_id_input));

//submit form
        form.submit();

this.refreshUploadAction(); //reset the upload box

this.$el.find("#postiframe").load(function() {

//removes the loading icon because the file has finished uploading
            $("#status").html("");

//having trouble getting the results back from the post
            // console.log($("#postiframe"))
            //  iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
            //  console.log(iframeContents)
            // $("#textarea").html(iframeContents);
        });

return false;

},
```

SAP UI5 FileUploader 使用的隱藏 iframe 和 form 元素的設計明細

相關文章