Apriso Modern UI样式系列之五附件上传FileUploader

李英杰同学

发布于 2024-04-11 14:15:10

780

发布于 2024-04-11 14:15:10

文章被收录于专栏：智能制造社区智能制造社区

概述

在Client Mode篇中已经介绍，在Client Mode下不能使用FilePicker业务控件，那在客户端开发模式下如何实现附件上传功能呢？ModernUI中也已经封装了一个附件上传的组件。

正如系列一中介绍的，ModernUI中包含了一些扩展的Javascript、CSS和Operation实体，其中也包含了一些非常有用的窗体组件。

本文介绍ModernUI中FileUploader组件，该组件包含：

Javascript：ModernUIUploader.js
CSS：ModernUIUploader.css

主要功能

上传文档，并显示上传文件清单
上传后提供删除功能
图片提供预览功能
在https模式下，支持直接从剪贴板中通过Ctrl+V复制图片

界面样式

基本用法

▶第一步：编写页面、View：

▶第二步：在主界面的View Operation中引入Javascript文件和css样式文件的引用：

<script src="[Apriso]/ModernUI/Controls/ModernUITiles/ModernUITiles.js"</script>

<link rel="stylesheet" type="text/css" href="[Apriso]/ModernUI/Controls/ModernUIUploader/ModernUIUploader.css" />

▶第三步编写Operation

ScreenInterface函数增加FilePathList、FileURLList、FileNameList三个字符列表型外部输出。

▶第四步：添加html和Javascript：

定义样式为” vf-file-uploader”的一个DIV，调用modernUIUploader进行初始化

<div class="vf-file-uploader"></div>
<script>
$Context.view.onLoaded(function(){
if(location.protocol == "https:") {
var textarea = $('<textarea></textarea').addClass('vf-textarea').attr('placeholder', 'Use CTRL+V to capture image from clipboard');
$("div.vf-file-uploader").after(textarea);
        $("div.vf-file-uploader").modernUIUploader($Context, textarea);
} else 
$("div.vf-file-uploader").modernUIUploader($Context);
var element = $("div.vf-file-uploader").detach();
$(".fc_Control3").append(element);
});
</script>

▶第五步：运行并进行验证

验证界面运行是否正常。附件是否成功上传到Portal\Upload目录下。

移动上传控件到Form中

▶第一步：编写页面View中添加一个Label类型控件Control3：

▶第二步：修改Javascript，使用detach和append方法，在view加载完毕后进行BOM元素移动

var element = $("div.vf-file-uploader").detach();
$(".fc_Control3").append(element);

测试运行后的效果如下：

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2024-03-27，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自智能制造社区微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度