2009-05-20 67 views
2

我在ColdFusion中有一個表單,最初有5個輸入字段用於文件上傳。如果用戶意識到他們在附加它們的過程中有超過5個文件需要上傳,我希望表單在爲#字段中的更改提交自己時保留這些值。回覆時在ColdFusion中保留type =「file」的輸入值

使用<cfform>標籤與preservedata =「yes」屬性應該做到這一點 - 但所有我得到的是存儲在輸入的值在重新提交臨時值未在字段中顯示,也不適用於提交。

編輯:感謝大家的好評,你們都幫了忙,是正確的。我能夠實施Adam的建議解決方案。很棒!謝謝!

function changeFieldCount() // javascript function for submit on input count change 
{ 
    var count = document.forms[0].numtotal.options[document.forms[0].numtotal.selectedIndex].value; 
    document.forms[0].action = "me.cfm?count=" + count; 
    document.forms[0].submit(); 
} 

<cfparam name="url.count" default="5"> 

<cfform name="dispfiles" method="post" enctype="multipart/form-data" preservedata="yes"> 
    <!--- looping for file input fields ---> 
    <cfloop index="counter" from="1" to="#url.count#"> 
    <cfinput type="file" name="file#counter#" size="50" maxlength="60"><br> 
    </cfloop> 

    <br>Number of Files to Attach: 
    <!--- looping for # of input selection---> 
    <cfselect name="numtotal"> 
    <cfloop index="cnt" from="1" to="20" step="1"> 
     <cfoutput> 
     <option value="#cnt#" <cfif #cnt# eq #url.count#>selected</cfif>> 
      #cnt# 
     </option> 
     </cfoutput> 
    </cfloop> 
    </cfselect> 

    <cfinput type="button" name="op-display" value="Display" onclick="changeFieldCount()"> 
    <cfinput type="button" name="op-upload" value="Attach Files" onclick="submitfrm(this.form)"> 
    <cfinput type="button" name="cancel" value=" Cancel " onclick="window.close()"> 
</cfform> 

這是我對得到的提交查看源代碼是什麼我越來越:

<input name="file1" id="file1" type="file" value=".../cfusion.war/neotmp8858718543274653167.tmp" maxlength="60" size="50" /><br> 

回答

3

要詳細說明@ SpliFF的答案,您需要做的是使用JavaScript動態創建更多文件字段。

下面是使用jQuery使JavaScript更容易一些的示例。我還使用了一個變量來跟蹤顯示的文件字段的數量,以便它們的名稱都附加一個唯一的編號,從而可以循環並在服務器端唯一標識它們。

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

<script type="text/javascript"> 
    //track the current number of file fields displayed 
    var numUploadFields = 5; 
    //attach an anonymous function to the button to add more fields 
    $(function(){ 
     $("#add5").click(function(){ 
      for (var i = 0; i < 5; i++){ 
       numUploadFields += 1; 
       var newHTML = "<br/><input type='file' name='upload" + 
           numUploadFields + "' />"; 
       $("#someSection").append(newHTML); 
      } 
     }); 
    }); 
</script> 

<form method="post" action=""> 
    <div id="someSection"> 
     <input type="file" name="upload1" /><br/> 
     <input type="file" name="upload2" /><br/> 
     <input type="file" name="upload3" /><br/> 
     <input type="file" name="upload4" /><br/> 
     <input type="file" name="upload5" /> 
    </div> 
    <input type="button" id="add5" value="Add 5 more file fields" /> 
</form> 
5

這是在出於安全原因,所有的瀏覽器設計。您無法插入文件字段的值。

2

使用JS DOM方法構建額外的文件輸入。既然你沒有離開這個頁面,那麼這個頁面很快就沒有了,