图片上浏览和上传文件按钮

我用下面的代码具有文本框：

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">时看到的那样。其次，文件的路径必须显示在上面的文本框中。

再次当我按下上传按钮，应该将该文件上传

来源

2010-06-29 fawad

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

一个基于HTML的解决方法可以在这里找到：Styling an input type="file" 不知道它是否可以做到你所需要的，但我认为这是最接近你可以得到的。

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

来源

2010-06-29 19:18:41 Unicron

非常感谢你，它看起来像我想要的。 – fawad 2010-06-29 19:27:39

大多数我们平时使用的样式表单控件不会对上传控制任何影响的CSS属性的，有办法的风格吧，一个很好的例子是Here

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

我花了很多时间与客户端的自定义文件上传控件作斗争，并发现迄今为止最好的方法是使用Valums jquery file uploader一切都已经建成，你可以自定义多达你想要的，也有拖放功能。

来源

2013-03-14 06:39:56 Marz

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

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

来源

2013-09-04 07:30:50

好主意的人。 – 2015-12-14 14:48:47

图片上浏览和上传文件按钮

回答

相关问题