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>

'no file selected' 似乎是输入名称 = 'upload' 字段的一部分，但 ColdFusion 显然控制了它，我不能插入任何其他内容。

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

解决方法

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

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

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

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

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

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

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

cffile coldfusion coldfusion upload upload