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

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>