当前位置: 首页 > Web前端 > HTML5

SAPUI5FileUploader使用的隐藏iframe和form元素的设计细节

时间:2023-04-05 14:29:30 HTML5

我们研究了SAPUI5FileUploader控件渲染时生成的HTML源代码:真正提供给用户选择文件上传的控件是高亮显示的type属性类型下图文件的输入控件。文件输入位于下图高亮的表单控件中,该控件的动作指向文件服务器url:http://localhost:3003/upload,即接收文件上传的服务器。target指向另一个隐藏的iframe的id:这个隐藏的iframe如下图所示:这个iframe位于SAPUI5框架的静态区域:关于form的target属性:target属性指定了一个名称或关键字,指示在何处显示收到的提交表单响应。target属性定义浏览上下文的名称或关键字,例如选项卡、窗口或内联框架。target的值可能有以下几种类型:SAPUI5使用最后一种,指向id属性指定的一个iframe.form的action属性:提交表单时将表单数据发送到哪里。可能的值:绝对URL-指向另一个网站(如action="http://www.example.com/example.htm")相对URL-指向网站内的文件(如action="example.htm")SAP在UI5XML视图中推荐使用第二种,更加灵活。有的开发者可能会疑惑为什么文件上传场景需要一个隐藏的iframe?其实我们需要一个iframe来上传文件而不离开当前页面(比如Ajax)。现代浏览器支持FormData,它允许开发人员使用XMLHttpRequest上传文件。总结一下使用iframe+input进行文件上传的步骤。首先定义form和iframe元素:

指定表单的target属性作为iframe的id,下面以postiframe为例,这样通过文件输入上传文件时,不会强制刷新当前页面。iframeSubmitFile:function(){//添加一个旋转的加载图标。图标来自字体awesomethis.$el.find("#status").html("");varform=$('#file-upload-form');form.attr("action","/user-upload-doc");form.attr("方法","帖子");form.attr("enctype","multipart/form-data");form.attr("target","postiframe");//form.attr("target",iframe);form.attr("文件",this.$el.find('#upload-doc-file').val());//如何向帖子字段添加另一个值的示例varaudit_id=5;//为表单post动态创建输入值varaudit_id_input=$("").attr("type","hidden").attr("name","audit_id").val(audit_id);//将它添加到formform.append($(audit_id_input));//提交表单form.submit();这个.refreshUploadAction();//重置上传框this.$el.find("#postiframe").load(function(){//删除加载图标,因为文件已完成上传$("#status").html("");//无法从帖子中获取结果//console.log($("#postiframe"))//iframeContents=$("#postiframe")[0].contentWindow.document.body.innerHTML;//console.log(iframeContents)//$("#textarea").html(iframeContents);});返回假;},