相关文章推荐
俊逸的黄瓜  ·  【下篇】2021 年 Rust ...·  1 年前    · 
逆袭的电梯  ·  java 正则去掉最后 ...·  1 年前    · 
可爱的石榴  ·  python读取xml字符串-掘金·  1 年前    · 


当我们使用 SAP UI5 的 FileUploader 控件,上传本地文件时,其执行逻辑的入口,就是 ​ ​FileUploader.prototype.upload​ ​:

SAP UI5 FileUploader 的本地文件上传技术实现分享_开发语言

首先判断该控件是否已经被 disable:

if (!this.getEnabled()) {
return;
}

SAP UI5 FileUploader 底层可以基于 form 的 multipart/form-data 或者 XHR 两种技术方式进行文件上传,这在下面的源代码看得很清楚。

SAP UI5 FileUploader 的本地文件上传技术实现分享_javascript_02

首先使用 ​ ​getDomRef​ ​​ 获取 ​ ​fu_form​ ​,即下图这个高亮区域:

SAP UI5 FileUploader 的本地文件上传技术实现分享_javascript_03

try {
this._bUploading = true;
if (this.getSendXHR() && window.File) {
var aFiles = this.FUEl.files;
if (bPreProcessFiles) {
this._sendProcessedFilesWithXHR(aFiles);
} else {
this._sendFilesWithXHR(aFiles);
}
} else if (uploadForm) {
// In order to do the submit, the action DOM attribute of the inner form should be accurate.
// If there is a change in the passed to the uploadUrl property string, we must ensure that it is
// applied in the DOM and the submit is performed after there is new rendering.
sActionAttr = uploadForm.getAttribute("action");
if (sActionAttr !== this.getUploadUrl()) {
this._submitAfterRendering = true;
} else {
this._submitAndResetValue();
}
}

如果返回的对象实例不为空,说明使用 form 的方式去提交本地代码。

此时准备提交文件了:​ ​_submitAndResetValue​

SAP UI5 FileUploader 的本地文件上传技术实现分享_SAP UI5_04

调用的是 HTML form 原生的 submit 方法进行提交:

SAP UI5 FileUploader 的本地文件上传技术实现分享_sap_05

服务器端返回了一个 ​ ​File uploaded ok!​ ​ 的字符串:

SAP UI5 FileUploader 的本地文件上传技术实现分享_javascript_06

这个字符串在隐藏的 iframe 里能够看到:

SAP UI5 FileUploader 的本地文件上传技术实现分享_SAP UI5_07

访问不了 ​ ​this.oIFrameRef.contentWindow.document.body.innerHTML;​ ​:

错误消息:VM1992:1 Uncaught DOMException: Blocked a frame with origin “http://localhost:8080” from accessing a cross-origin frame.

不能使用 JavaScript 访问具有不同来源的 ​ ​iframe​ ​,以避免任何可能的安全风险。 对于同源策略,浏览器会阻止脚本尝试访问具有不同源的 iframe.

实际上,我根本就不能在 8080 端口的 index.html 上下文环境里,查看另一个 iframe 的任何属性,报一样的错误:

SAP UI5 FileUploader 的本地文件上传技术实现分享_前端_08

那我提前在 iframe 创建时检测:

SAP UI5 FileUploader 的本地文件上传技术实现分享_SAP UI5_09

刚刚创建出的 iframe,href 是 about:blank:

SAP UI5 FileUploader 的本地文件上传技术实现分享_开发语言_10

直到这个函数执行完,​ ​this.oIFrameRef.contentWindow.location.href​ ​ 都是处于可访问状态:

SAP UI5 FileUploader 的本地文件上传技术实现分享_SAP UI5_11

beforeRendering 的钩子里,​ ​this.oIFrameRef.contentWindow.location.href​ ​ 仍然可用,但是 afterRendering 的钩子就不行了:

SAP UI5 FileUploader 的本地文件上传技术实现分享_前端_12

这个 before 和 afterRendering 的钩子,在点击 Browse… 按钮选择本地文件的时候,会各触发一次。

选定好之后,点击 Upload 按钮,会再触发一次:

SAP UI5 FileUploader 的本地文件上传技术实现分享_SAP UI5_13

点击 upload File 之后,执行 submit 之前,都可以正常访问:this.oIFrameRef.contentWindow.location.href

SAP UI5 FileUploader 的本地文件上传技术实现分享_SAP UI5_14

post 到 3003 之后,再访问就不行了:

SAP UI5 FileUploader 的本地文件上传技术实现分享_SAP UI5_15


java根据表造数据 java根据数据生成图片

Java可以使用各种图像处理库,如JavaFX,ImageIO等来生成图片。您可以创建一个BufferedImage并使用Graphics2D绘制图形。还可以从其他数据,如字符串,数组等生成图像。下面是一个使用ImageIO从字符串生成图像的示例代码:import java.awt.image.BufferedImage; import java.io.File; import java.io.I

mysql视图里放存储过程 mysql存储过程和视图

mysql视图CREATE VIEW <视图名> AS <SELECT语句>; -- 创建视图语法,使用 select 语句中获取的数据显示在视图中 create view view_name as select 语句; -- 创建视图 alter view view_name as select 语句; -- 修改视图 show create vie