在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/