salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取。salesforce 零基础学习(二十四)解析csv格式内容中有类似的使用此标签进行解析附件内容,后台只要声明String类型变量用来存储附件名称,Blob类型变量用来存储附件的内容即可。

但是当我们的项目整体使用第三方的前端框架,例如VUE或者angular等前端框架时,有时使用apex:inputFile反而不是很方便,需要用到html的原生的附件上传的标签<input type="file"/>实现附件的上传。下面的demo用来实现使用 remote action方式实现Attachment的添加操作。

 本篇主要通过 JavaScript中的FileReader对象,将文件进行base64编码,然后后台进行base64解码来实现Blob对象传递到后台。

一.AddAttachmentByInputFileController: 后台RemoteAction用来实现附件上传,构造函数中hardcode搜索出一个指定的Account

 1 public with sharing class AddAttachmentByInputFileController {
 2     public String accountId{ get; set; }
 3     public AddAttachmentByInputFileController() {
 4         Account testAccount = [SELECT Id
 5                                 FROM Account
 6                                 WHERE Name = 'york zhang'];
 7         accountId = testAccount.Id;
 8     }
 9     @RemoteAction
10     public static String testAddAttachment(String attachmentName,String attachmentBody,String parentId) {
11         String operateResult;
12         Attachment tmpAttachment = new Attachment();
13         tmpAttachment.Name = attachmentName;
14         tmpAttachment.Body = EncodingUtil.base64Decode(attachmentBody);
15         tmpAttachment.ParentId = parentId;
16         try {
17             insert tmpAttachment;
18             operateResult = 'Successfully';
19         } catch (Exception e){
20             operateResult = 'Failed';
21         }
22         return operateResult;
23     }
24 }

二.AddAttachmentByInputFile:  VF页面实现上传附件,解析以及调用后台保存到指定Account上。其中要注意的是Base64编码以后,对文件大小有限制,使用input type file最大上传大小为4.3M。javascript中使用FileReader对数据进行二进制处理。

 1 <apex:page controller="AddAttachmentByInputFileController">
 2     <script type="text/javascript">
 3         function saveAttachment() {
 4 
 5             var maxFileSize = 4350000;      //Base64 编码以后最大的文件字节数
 6             var attachmentBody;                //附件内容
 7             var attachmentName;                //附件名称
 8             var fileSize;                     //附件大小
 9 
10             var testFiles = document.getElementById('testAttachment').files;
11             var testFile = testFiles[0];
12 
13             if(testFile != undefined) {
14                 if(testFile.size <= maxFileSize) {
15                     attachmentName = testFile.name;
16                     var fileReader = new FileReader();
17                     fileReader.onloadend = function(e) {
18                     attachmentBody = window.btoa(this.result);  //Base 64 encode the file
19                     fileSize = attachment.length;
20                             
21                     Visualforce.remoting.Manager.invokeAction(
22                       '{!$RemoteAction.AddAttachmentByInputFileController.testAddAttachment}',
23                       attachmentName,
24                       attachmentBody,
25                       '{!accountId}',
26                       function(result,event) {
27                         alert(result);
28                       });
29                       
30                     }
31                     fileReader.onerror = function(e) {
32                       alert("上传失败,请重新尝试");
33                     }
34                     fileReader.onabort = function(e) {
35                       alert("上传失败,请重新尝试");
36                     }
37                
38                     fileReader.readAsBinaryString(testFile);  
39                
40                 } else {
41                     alert("Base64 编码最大允许4.3M文件");
42                     
43                 }
44             } else {
45                 alert("请先选择一个附件上传。");
46                 
47             }
48         }
49     </script>
50     <input type="file" id="testAttachment" value="" filename="testAttachment"/>
51     <br/>
52     <input type="Button" value="Attach" onclick="saveAttachment()"/>
53 </apex:page>

结果展示:

1.上传一个文件,点击Attach按钮,提示上传成功。

2.找到对应的Account,附件已经成功绑定上传。

总结:此篇主要描述使用 input type=file时,salesforce针对上传附件的处理。篇中还有好多的地方可以优化,比如 javascript remoting也有最大的传输限制,String字符串也有最长的限制, FileReader不是所有的浏览器都兼容。这些细节处理感兴趣的可以自己优化一下。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CSDN技术头条

SpringBoot 核心模块原理剖析

微服务始终一个相对热门的话题,SpringBoot 则以其轻量级、内嵌 Web 容器、一键启动、方便调试等特点被越来越多的微服务实践者所采用。 知其然还要知其所...

4549
来自专栏Java3y

Struts2【拦截器】

什么是拦截器 拦截器Interceptor…..拦截器是Struts的概念,它与过滤器是类似的…可以近似于看作是过滤器 为什么我们要使用拦截器 前面在介绍Str...

3265
来自专栏存储

建立本地的Blast数据库

Blast(basic local alignment search tool) 局部序列比对基本检索工具,是NCBI开发的一款基于序列相似性的数据库搜索程序。...

5509
来自专栏用户2442861的专栏

C语言开发Linux下web服务器(支持GET/POST,SSL,目录显示等)

http://blog.csdn.net/yueguanghaidao/article/details/8450938

3032
来自专栏屈定‘s Blog

Maven仓库清理脚本

工作中本地maven仓库随着项目增多会变得越来越大,看着心烦,于是想着清理. 没有发现很好的清理策略,只能从文件以及文件夹修改时间上入手,修改时间小于指定时间的...

3493
来自专栏李家的小酒馆

struts2面试整理

struts2的工作原理 客户端发送请求 经过一系列的过滤器 FilterDispatcher通过ActionMapper来决定这个REquest需要调用的Ac...

2000
来自专栏魏琼东

一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-实现字典的打印

系列回顾          从上一篇文章一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-实例一个模块(商品字典)开始我带领大...

2165
来自专栏我的技术专栏

《Go in action》读后记录:Go的并发与并行

983
来自专栏黑泽君的专栏

day56_BOS项目_08

  注意1:权限数据属于比较特殊的数据,系统在上线之后,必须先把权限数据给它初始化到数据库中去,然后这个系统才可以跑起来。如果不初始化权限数据的话,那么登录上系...

1122
来自专栏Java3y

Hibernate面试题大全

Hibernate常见面试题 Hibernate工作原理及为什么要用? Hibernate工作原理及为什么要用? 读取并解析配置文件 读取并解析映射信息,创建...

4175

扫码关注云+社区

领取腾讯云代金券