如何获得不显示文件路径的上传选项的表单？

Question

我有一个允许用户上传图像的表单。它使用

<input name="imageupload" id="imageupload" type="file" /> 

但我希望用户只能看到浏览按钮，而不是文件路径。我也不想使用SWFupload插件

Answer 1

您需要为此使用一些Javascript。

出于安全原因，您不能修改文件输入的路径（我们不能让恶意代码上传他们想要的任何文件）。

但你可能做的是创建一个新的文本输入与你想要显示的值，并将其放置在最上面，如果文件输入。然后，在表单的onsubmit处理程序中，可以禁用文本输入（所以它的值不会被提交），提交表单，然后重新启用文本输入。

唯一不利的是，如果用户在文本输入框内单击，则“选择文件”对话框将不会出现。但是，您可以通过绑定到文本输入的onfocus事件并使用它将焦点设置到文件输入元素来解决此问题。

Answer 2

这里我们开始吧！

<script type="text/javascript"> 
    $(function() { 
     $('#btn-upload').click(function (e) { 
      e.preventDefault(); 
      $('#file').click(); 
     }); 
    }); 
</script> 

<style type="text/css"> 
    #file { display:none; } 
</style> 

<div> 
    <input type="file" id="file" name="file" /> 
    <button type="button" id="btn-upload">Image</button> 
</div>