标签：FileUploader attr form UI5 iframe input id target
我们研究 SAP UI5 FileUploader 控件渲染时生成的 HTML 源代码：真正提供给用户选择文件上传的控件，是下图高亮的这个类型属性 type 为 file 的 input 控件。
这个 file input 位于下图高亮的 form 控件，该控件的 action 指向文件服务器 url：http://localhost:3003/upload, 即接收文件上传的服务器。 target 指向另一个隐藏 iframe 的 id：
这个隐藏的 iframe 如下图所示：
这个 iframe 位于 SAP UI5 框架的 static area 内：
关于 form 的 target 属性：
-
target 属性指定一个名称或关键字，指示在哪里显示提交表单后收到的响应。
-
目标属性定义浏览上下文（例如选项卡、窗口或内联框架）的名称或关键字。
target 的值可能有以下几种：
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 元素：
<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>
<iframe id="postiframe" name="postiframe"></iframe>
将 form 的 target 属性指定为 iframe 的 id，下面的例子是 postiframe，这样通过 file input 上传文件时，不会强制让当前页面刷新。
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;
},
标签：FileUploader,attr,form,UI5,iframe,input,id,target 来源： https://www.cnblogs.com/sap-jerry/p/16535079.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。