项目上有时候会需要使用自定义的组件来上传需要的文件，通过Docusment借助Salesforce标准的组件来完成这个演示
先看运行效果：
VF Page 代码
<apex:page controller="FileUploadController" showHeader="false" sidebar="false" >
<apex:form >
<apex:pagemessages />
<apex:pageBlock >
<apex:pageBlockSection columns="4">
<apex:inputFile value="{!csvFileBody}" filename="{!csvAsString}"/>
<apex:commandButton value="Import file" action="{!importFile}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
APEX 代码
public class FileUploadController { public Blob csvFileBody{get;set;} public String csvAsString{get;set;} public String oppId{get;set;} public FileUploadController(){ oppId = ApexPages.currentPage().getParameters().get('oppId'); System.debug(oppId); } public void importFile(){ // Insert file ContentVersion contentVersion_1 = new ContentVersion(); contentVersion_1.Title = csvAsString; contentVersion_1.PathOnClient = csvAsString; contentVersion_1.VersionData = csvFileBody; insert contentVersion_1; System.debug('file id:' + contentVersion_1.Id); // query file List<ContentVersion> list_version = [SELECT contentdocumentid,ownerid FROM ContentVersion WHERE id =: contentVersion_1.Id]; ContentDocumentLink link = new ContentDocumentLink(); link.ContentDocumentId = list_version[0].contentdocumentid; link.LinkedEntityId = oppId; link.ShareType = 'V'; // save file in the record insert link; } }
访问VF页面时传入Opportunity的Id，点击上传文件，Import后传入的文件会出现在对应的Opportunity下面。
调用Salesforce的标准组件来实现，唯一需要注意的是对Document的DML操作, 相对Attachment来说要更复杂一些，不过这样实现的页面有一个很严重的问题，那就是组件上传的文件大小，受VisualPage本身135KB大小的限制（现在似乎更新到170KB）, 进而导致上传的文件必须小于170KB, 这样的实现是不够的
那么我们迭代一个新的版本，优化一下页面元素，同时将文件上传的大小限制扩大
迭代后运行效果如下：
VF Page代码：
<apex:page controller="FileUploadController" sidebar="false" showHeader="false" standardStylesheets="false">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<apex:stylesheet value="{!URLFOR($Resource.bootstrap3, '/css/bootstrap.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.jqueryui,'/external/jquery/jquery.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jqueryui, '/jquery-ui.js')}" />
<apex:includeScript value="{!URLFOR($Resource.bootstrap3, '/js/bootstrap.js')}"/>
<style type="text/css">
#drop {
border: 2px dashed #bbb;
border-radius: 5px;
text-align: center;
font: 15px bold,"Vollkorn";
color: gray;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ECECEC),to(#FEE0C6));
position: fixed;
bottom: 0;
left: 0;
height: 60px; line-height: 60px; 100%; z-index: 4;
}
</style>
<body>
<apex:form >
<div class="container" style="padding-top: 15px; margin-bottom: 50px;">
<div class="row">
<div class="panel panel-info">
<div class="panel-heading" id="output">Tip: please download the latest template </div>
<div class="panel-body">
<div class="row" id="buttonGroupArea">
<div class="col-md-7">
<apex:outputPanel >
<a class="btn btn-info" target="_blank" href="模板下载链接">Download Template</a>
</apex:outputPanel>
</div>
<div class="col-md-2">
<div class="btn-group pull-right " role="group" aria-label="..."></div>
<button type="button" id="upload" class="btn btn-info" onclick="saveAttachment()">Import file</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Hide input to handle click uploads-->
<div style="display:none;">
<input type="file" id="fileInput" value="" filename="fileInput"/>
</div>
<div id="drop">
Click or drag files here to upload
</div>
</apex:form>
</body>
<script type="text/javascript">
function saveAttachment() {
var testFiles = document.getElementById('fileInput').files;
filesReader(testFiles);
}
/**
* Click the upload file button and trigger when a file is selected
* * */
function changeFileValue(e){
// get file elements
var fileInput = document.getElementById('fileInput')
var testFiles = fileInput.files;
var testFile = testFiles[0];
if(testFile != undefined){
var file_Name = testFile.name;
var dropValue = document.getElementById('drop');
dropValue.innerText = 'Selected files:' + file_Name;
}
}
/*****
*
* Triggered when placing a file into a specified area
*/
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
filesReader(files);
}
function filesReader(testFiles){
var maxFileSize = 4350000; //Maximum number of file bytes after Base64 encoding
var file_Body; //file body
var file_Name; //file Name
var testFile = testFiles[0];
if(testFile != undefined) {
if(testFile.size <= maxFileSize) {
file_Name = testFile.name;
var dropValue = document.getElementById('drop');
dropValue.innerText = 'Please wait,' + file_Name + ' is uploading ...';
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
file_Body = window.btoa(this.result); //Base 64 encode the file
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.FileUplo adController.testAddAttachment}',file_Name,file_Body,'{!oppId}',
function(result,event) {
dropValue.innerText = 'Click or drag files here to upload';
alert(result);
});
}
fileReader.onerror = function(e) {
alert("Upload failed, please try again");
}
fileReader.onabort = function(e) {
alert("Upload failed, please try again");
}
fileReader.readAsBinaryString(testFile);
} else {
alert("Base64 encoding allows up to 4.3M files");
}
} else {
alert("Please select a file to upload first.");
}
}
function handleDragover(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}
// Click to pop up file selection window function
showFileBox(){
var active = document.getElementById("fileInput");
var mouseEvent = document.createEvent("MouseEvents");
mouseEvent.initEvent("click", true, true);
active.dispatchEvent(mouseEvent);
}
// Add drag event listener
var drop = document.getElementById('drop');
if (drop.addEventListener) {
drop.addEventListener('dragenter', handleDragover, false);
drop.addEventListener('dragover', handleDragover, false);
drop.addEventListener('drop', handleDrop, false);
//Add click file event listener
drop.addEventListener('click',showFileBox,false);
}
// Listen for the Change event of InputFile
var fileInputDom = document.getElementById('fileInput');
if(fileInputDom.addEventListener){
fileInputDom.addEventListener('change',changeFileValue,false);
}
</script>
</head>
</apex:page>
Apex Code 代码：
public class FileUploadController { public Blob csvFileBody{get;set;} public String csvAsString{get;set;} public String oppId{get;set;} public FileUploadController(){ oppId = ApexPages.currentPage().getParameters().get('oppId'); System.debug(oppId); } @RemoteAction public static String testAddAttachment(String attachmentName,String attachmentBody,String parentId) { String operateResult; ContentVersion contentVersion_1 = new ContentVersion(); contentVersion_1.Title = attachmentName; contentVersion_1.PathOnClient = attachmentName; contentVersion_1.VersionData = EncodingUtil.base64Decode(attachmentBody); try { insert contentVersion_1; List<ContentVersion> list_version = [SELECT contentdocumentid,ownerid FROM ContentVersion WHERE id =: contentVersion_1.Id]; ContentDocumentLink link = new ContentDocumentLink(); link.ContentDocumentId = list_version[0].contentdocumentid; link.LinkedEntityId = parentId; link.ShareType = 'V'; // save file in the record insert link; operateResult = 'import Successfully'; } catch (Exception e){ operateResult = 'import Failed'; } return operateResult; } }
比较初始版本，这个版本的UI进行了简单的调整，在新增了拖拽文件上传的功能的同时，将文件上传的大小扩增至4.3M(Base64编码大小限制)，通过异步传递数据，绕过了VisualForce Page大小的限制
Tips: 新版本需要引入Jquery和Bootstrap3的资源库来实现
文件的上传真要实现起来很比较这个更加复杂，比如将上传文件的大小进一步扩大该如何实现，比如如何同时上传多个文件，将文件上传的状态进度条分别进行显示，需求很多，只能略做抛砖引玉，希望有所帮助