时间戳

首页 > 解决方案 > Coldfusion cffile 上传替换未选择文件

coldfusion - Coldfusion cffile 上传替换未选择文件

问题描述

在 Coldfusion 中，使用 cffile 上传，当使用浏览按钮选择文件时，所选文件的名称会显示在按钮旁边。到目前为止，一切都很好。当我提交要上传的文件时，文本变回“未选择文件”。这无疑是因为我们正在提交一个表格。

但是，我将表单提交到同一页面，并希望看到所选文件的名称而不是“未选择文件”，这可能会使用户感到困惑。

编码：

<form 
 enctype="multipart/form-data" 
 method ="post" 
 name   ="attupload"  
 action ="">

<cfoutput>   
   <table style = "margin-left: 40%">
  <tr><td>
   <input name="theupload" 
          type="file" 
          style = "font-family: comic sans ms; 
                   color: ##679C9C">        
  </td></tr>
  </table>
   <div style = "width:20%; margin:5% auto 5% 45%">  
     <input name  = "submit" 
            type  = "submit"
            class = "submitbut" 
            style = "font-size: 16px"
            value = "Upload File"> 
   </div> 

</cfoutput>   
</form>

“未选择文件”一词似乎是输入名称=“上传”字段的一部分，但 ColdFusion 显然控制了它，我无法插入其他任何内容。

在此处输入图像描述

有谁知道我如何控制“未选择文件”注释，以便我可以将所选文件的名称放回该位置？我尝试过使用 javascript，但它被忽略了。

标签： coldfusionuploadcffile

解决方案

选择文件后，您可以使用File API通过 JavaScript 访问其属性。您不能<input type="file">使用 JavaScript 影响默认字段旁边显示的值。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

您还应该避免将表单提交到同一页面。您应该遵循以下流程：

  • 表单页面
  • HTTP POST 到表单处理页面。
  • 表单处理后，<cflocation>（301 重定向）回到列表页面或表单页面。

当您发布到同一页面时，用户可以点击重新加载并被提示重新提交表单数据。这在许多情况下可能是有问题的。作为替代方案，您可以使用Ajax或更好地通过Fetch. 这避免了在页面重新加载时重新发布和重定向离开当前屏幕。

此外，您应该避免命名<input type="submit">“提交”。submit()如果您需要使用它，它可能会与 JavaScript 函数发生冲突。

<input name  = "submit" 
        type  = "submit"
        class = "submitbut" 
        style = "font-size: 16px"
        value = "Upload File">

推荐阅读