我在ColdFusion中有一个表单,最初有5个用于文件上传的输入字段。如果用户意识到他们在附加过程中要上传的文件超过5个,我希望该表单在提交自己的字段变换时保留这些值。
使用带有preserveata =“yes”属性的<cfform>
标签应该可以实现这一点 - 但我得到的只是在重新提交时存储在输入值中的临时值,该值未显示在字段中也不适用于提交。
编辑:感谢大家的精彩回答,你们都帮助并且是正确的。我能够实现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>
答案 0 :(得分:5)
出于安全原因,这是在所有浏览器中设计的。您无法插入文件字段的值。
答案 1 :(得分: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>
答案 2 :(得分:2)
使用JS DOM方法构建其他文件输入。由于你没有离开这个页面,所以这很快就没有了。