Question

我想要“浏览”和“上传”的图像按钮

我有使用以下代码的文本框：

CSS

   .uploadpathdiv
    {
     margin:0;
     height:44px;
     width:464px;
     background:url('images/img-upload.png') no-repeat bottom;
    }


.uploadpath
{
 background:none;
 border:none;
 width:400px;
 height:40px;
 margin:0;
 padding: 2px 7px 0px 7px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
}

HTML

<div class="uploadpathdiv">
<input class="uploadpath" name="path" type="text" />
</div>
<img src="/themes/scaccarium/images/button-upload.png" />
<img src="/themes/scaccarium/images/button-browse.png" />

图像代码适用于“浏览”和“上传”按钮。

请帮我纠正上面的代码，这样当我按下浏览按钮时，我会看到你使用<input type = "file" name="browse">时看到的“文件选择选项”。其次，文件的路径必须显示在上面的文本框中。

第三，当我按下上传按钮时，应该上传文件

Answer 1

如果使用标签标签标记图像，则可以单击图像，然后选择浏览按钮。

<div id="fileInput">
    <label for="FileID"><img src="ImageURL"></label>
    <input type="file" id="FileID"/>
</div>

Answer 2

无法通过CSS定位文件上传控件的“浏览...”按钮。

可以在此处找到基于HTML的解决方法：Styling an input type="file" 不确定它是否能完全满足你的需要，但我认为这是你能得到的最接近的。

如果你想完全控制控件（没有双关语），你必须使用像SWFUpload这样的基于Flash的上传器。请注意，这些上传器与普通文件上传控件的工作方式略有不同，因此您可能需要更改工作流程才能使其工作，并确定是否值得付出努力。

Answer 3

我们通常用来设置表单控件的大多数CSS属性对上传控件没有任何影响，有很多方法可以设置样式，一个很好的例子就是Here

此技术基本上将控件的不透明度设置为0，并在其下方放置另一个“样式”按钮。因此，当您点击样式按钮时，您实际上是在点击上传控件。

我花了很多时间与客户的自定义文件上传控件进行斗争，并且发现到目前为止最好的方法是使用Valums jquery file uploader所有内容已经构建完毕并且您可以根据需要自定义，也有拖动和删除功能。

浏览和上传文件按钮上的图像

3 个答案: