如何使文件输入字段自动换行



在HTML表单中,我有一个这样的文件字段:

<div class="filefield">
<input type="file" name="myfile" id="fileinput">
</div>

显示一个按钮和按钮旁边的一些文本。当还没有选择文件时,文本为:No file chosen。如果已有文件被选中,则显示该文件的名称。

此文本显示在按钮的右侧。我希望它显示在按钮下方。CSS我试过很多东西,没有什么作品,No file chosen总是显示在右侧的按钮,即使两个div和输入固定的宽度只有一样宽的按钮,和一个固定的高度足够高的按钮和两行文本,文本仍然显示在右边,div的外面,而不是下面是div内部的空间。如何使包装所以下面的文本显示按钮吗?

@Guffa的回答表明您不能乱动该字段,您可以创建一个hack来绕过它。

如果是button元素,点击时就像文件浏览器的按钮一样呢?然后是保存浏览器输入的文件值的span元素?这肯定会有一些js的漏洞,但可以解决问题。

编辑

工作示例:http://jsfiddle.net/nmeAW/1/

编辑2

更好的工作示例:http://jsfiddle.net/nmeAW/2/

你不能。文件输入字段是一个单独的控件,即使它看起来像几个可以单独控制的控件。

此外,如何显示文件输入控件完全取决于您使用的浏览器。它的外观没有在标准中指定,因此任何浏览器供应商都可以选择以他们认为合适的方式显示它。

你可以看看jQuery和一些上传文件插件,它们可以帮助你通过隐藏输入和激活/显示html中的文件选择信息来"重新设计"输入。

http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/

http://www.uploadify.com/demo/

http://www.plupload.com/example_queuewidget.php

http://blogs.bigfish.tv/adam/2009/06/14/swfupload-jquery-plugin/

相关内容

  • 没有找到相关文章

最新更新