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>

如何使用不显示文件路径的上载选项的表单？

2 个答案: