Coldfusion cffile 上传替换未选择文件

Question

在 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' 似乎是输入 name = 'upload' 字段的一部分，但 ColdFusion 显然控制了它，我无法插入其他任何内容。

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

Answer 1

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

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

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

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

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

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

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