Javascript在VisualForce頁面 - 表單提交成功，觸發頂點？

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

不扔扳手在你的計劃，但你可以嘗試在頂點完成整個程序。這裏有一些僞代碼。 Salesforce還爲Amazon S3開發了toolkit，因此您不必從頭開始開發所有產品。

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做心尖的工作，而不是爲JavaScript。

但是要繼續進行可能成功的破解，請嘗試使用apex:actionPoller進行表單提交。當它醒來時，它會檢查文件插入是否成功。如果在幾次民意調查之後，您仍然沒有成功，那麼請舉報超時。

Visualforce中的Javascript新奇可能是危險的，除非時間不是您的一個因素。最好的排氣Visualforce/Apex選項首先，然後纔在特殊情況下冒險進入自定義JavaScript或輕量級UI調整，imo。