VisualForce 页面中的 Javascript - 表单提交成功，触发 apex？

Question

现在，下面的代码在提交时首先插入一个文件，然后提交表单。这是有问题的 - 我需要它来验证表单是否已成功发布到 Amazon S3，然后插入（令牌）文件，以便它可以链接到它。

我基本上需要反转 SubmitFile 和 InsertFile，但我不确定如何实现（如果表单成功发送，则运行另一个 javascript 函数）。请参阅最底部的尝试...这可能吗？

   <apex:pageMessages id="pageErrors"></apex:pageMessages>
<form name="s3Form" action="https://s3.amazonaws.com/mybucket" method="post" enctype="multipart/form-data">   
    <input type="hidden" name="key"/> 
    <input type="hidden" name="AWSAccessKeyId" value="{!key}"/> 
    <input type="hidden" name="policy" value="{!policy}"/>
    <input type="hidden" name="signature" value="{!signedPolicy}"/> 
    <input type="hidden" name="acl" value="private"/> 
    <input type="hidden" name="x-amz-meta-FileId" value="{!File__c.id}"/>
    <input type="hidden" name="x-amz-meta-OrderId" value="{!OrderId}"/>
    <input type="hidden" name="x-amz-meta-CustomerId" value="{!CustomerId}"/>     
    <input type="hidden" name="success_action_redirect" value="{!serverUrl}{!OrderId}"/>           

    <apex:pageBlock title="New File Upload" mode="maindetail" tabStyle="File__c"> <!--  rendered="{!open}"-->
        <apex:pageBlockSection title="File Information" columns="2" collapsible="false" showHeader="false">                               
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Select File" for="selectFile"/>            
                <input id="selectedFile" type="file" size="25" name="file" onChange="setFileName(this.value)"/>                
            </apex:pageBlockSectionItem>                                         
        </apex:pageBlockSection>
        <apex:pageBlockButtons location="bottom">
            <input class="btn" type="button" value="Upload File" onClick="checkFile();return false;"/>                
            <input class="btn" type="button" value="Cancel" onClick="cancelFile();return false;"/>
            <input class="btn" type="button" value="Complete Order" onClick="completeFile();return false;"/>
        </apex:pageBlockButtons>          
    </apex:pageBlock>
    <apex:outputText styleClass="footer" value="Please click Complete Order when all the required files are uploaded. Thank you." />
</form> 

 <apex:form id="sfForm"><!--  rendered="{!open}"-->

    <apex:inputHidden id="hiddenServerURL"  value="{!serverURL}"/>
    <apex:inputHidden id="fileName" value="{!fileName}"/>
    <apex:inputHidden id="contentType" value="{!contentType}"/>
    <apex:inputHidden id="fileType" value="{!fileType}"/>
    <apex:actionFunction name="insertFile" action="{!insertFile}" oncomplete="submitFile();return false;"/>
    <apex:actionFunction name="completeOrder" action="{!completeOrder}"/>


    <script type="text/javascript">
    var sendFile = false;
    document.getElementById('{!$Component.hiddenServerURL}').value = '{!$Api.Enterprise_Server_URL_140}';       
    function setFileName(file) {
        var f = file.replace(/\\/g, "");
        f = f.replace(/C\:fakepath/g, ""); <!--Required for IE8-->
        document.s3Form.key.value = "{!CustomerName}/{!OrderName}/" + f;
        document.getElementById('{!$Component.fileName}').value = f;
        suffix = f.lastIndexOf(".") + 1;
        contentType = f.slice(suffix);
        document.getElementById('{!$Component.contentType}').value = contentType;
    }
    function setFileType(type) {
        document.getElementById('{!$Component.fileType}').value = type;
    }
    function checkFile() {
        if (document.s3Form.file.value=="") {
            alert("Please, select a file.");
            return false;
        } 
        else if (document.s3Form.fType.value=="--None--") {
            alert("Please, select a file type.");
            return false;
        }
        else {     
            alert("Uploading...Please click OK and wait for page to refresh.");        
            insertFile();
            sendFile = true;
        }
    }
    function submitFile() {
        if(sendFile = false) {
        return false;
        }
        else {
        document.s3Form.submit();
        }
    } 
    function completeFile() {
        completeOrder();
    }   
    </script>

</apex:form>

在控制器（扩展）中：

//SF File insert on an object (passed from page)
public PageReference insertFile() {
    this.file.Name = fileName;
    this.file.Type__c = fileType;
    this.file.Content__c = contentType;
    insert this.file;
    return null;
}

这是我尝试更改的 javascript 部分，但在广泛搜索后我找不到任何内容...

        function checkFile() {
        if (document.s3Form.file.value=="") {
            alert("Please, select a file.");
            return false;
        } 
        else if (document.s3Form.fType.value=="--None--") {
            alert("Please, select a file type.");
            return false;
        }
        else {     
            alert("Uploading...Please click OK and wait for page to refresh.");        
            document.s3Form.submit({
                success: function(){
                    alert("Testing!");
                    insertFile();
                },
            });
        }
    }

Answer 1

因此，如果我理解正确，您需要：

1. 验证文件
2. 将文件上传到 amazon s3
3. 将文件令牌保存到 salesforce

不要破坏您的计划，但您可以尝试在 apex 中完成整个例程。这是一些伪代码。 Salesforce 还开发了一个用于使用 Amazon S3 的工具包，因此您不必开发一切从头开始。

Visualforce 页面：

<apex:page controller="MyController">
  <apex:form>
    <apex:inputFile value="{!file.body}" filename="{!file.name}"/>
    <apex:commandButton value="Submit" action="{!submitFile}"/>
  </apex:form>
</apex:page>

Apex 控制器：

public class MyController {
  public Document file { get; set; } { file = new Document(); } // dummy object for storing binary file data

  public void submitFile() {
    if(!validateFile())
      return;
    String s3Token = submitToS3();
    if(s3Token != null) {
      File__c newFile = new File__c(name = file.name, s3_token__c = s3Token);
      insert newFile;
    }
  }
}

Answer 2

+1 在 Apex 中而不是 Javascript 中完成工作。

但要继续进行可能成功的黑客攻击，请尝试使用 apex:actionPoller< /a> 用于您的表单提交。当它醒来时，它会检查文件插入是否成功。如果经过几次投票后您仍然没有成功，则标记超时。

Visualforce 中的 Javascript 新颖性可能很危险，除非时间对您来说不是一个因素。在我看来，最好先用尽 Visualforce/Apex 选项，然后才在特殊情况下或为了轻量级 UI 调整才冒险使用自定义 JavaScript。