自定义CSS/HTML 浏览图像表单

12 浏览
0 Comments

自定义CSS/HTML 浏览图像表单

这是一个重复的问题，我知道每个浏览器都有自己的方式来显示。我的问题是，有没有办法自定义图片上传按钮。我想用HTML/CSS/PHP将普通表单上的浏览和上传按钮替换为一个图片按钮。这是否可行，并且是否与所有浏览器类型兼容。谢谢。

0

2 答案

0 Comments

Custom CSS/HTML Browse For Image Form（自定义CSS/HTML浏览图片表单）的问题可能是由以下原因导致的：当前的浏览图片表单无法自定义样式。

解决方法是使用一个插件，比如Uploadify（一个文件上传插件），它可以允许你像其他元素一样为上传字段添加样式。

对于这个问题，我们推荐使用Uploadify插件。它是一个功能强大且易于使用的文件上传插件，可以解决当前浏览图片表单无法自定义样式的问题。通过使用这个插件，你可以像任何其他元素一样为上传字段添加样式，从而实现Custom CSS/HTML Browse For Image Form。

要使用Uploadify插件，你需要将插件文件下载到你的项目目录中，并添加相应的CSS和JavaScript引用。然后，你可以使用以下代码来创建一个自定义的浏览图片表单：

然后，在你的JavaScript文件中，你需要初始化Uploadify插件，并设置相应的选项，例如上传的URL、文件类型限制和样式等。以下是一个示例代码：

$(function() {
  $('#uploadify').uploadify({
    'swf'      : '/path/to/uploadify.swf',
    'uploader' : '/path/to/upload.php',
    'fileTypeExts' : '*.jpg;*.png;*.gif',
    'buttonText'   : 'Browse Image',
    'height'       : 30,
    'width'        : 120,
    // 其他选项...
  });
});

在上面的代码中，你需要将`/path/to/uploadify.swf`和`/path/to/upload.php`替换为实际的路径。此外，你还可以根据需要调整其他选项，比如按钮文字、高度和宽度等。

通过使用Uploadify插件，你可以轻松地创建一个自定义的浏览图片表单，并为其添加样式。这样，你就可以满足Custom CSS/HTML Browse For Image Form的需求了。

总结起来，Custom CSS/HTML Browse For Image Form问题的解决方法是使用Uploadify插件，通过添加相应的CSS和JavaScript引用，初始化插件并设置相应的选项，从而实现自定义的浏览图片表单。这样，你就可以轻松地为上传字段添加样式，满足你的需求。

0
0 Comments

问题的出现原因：用户想要自定义一个包含浏览上传图片功能的表单，但是希望用图片代替默认的"Choose File"按钮。

解决方法：通过自定义CSS和HTML来实现。首先创建一个div元素，使用class为"browse"，并在其中嵌套一个div元素，使用class为"placeholder"，文本内容为"Upload"。然后在div元素中插入一个input元素，类型为file，name为image，id为image，class为input_text。接下来，使用CSS样式对browse和input、div元素进行设置。设置browse的position为relative，width为100px，height为20px。设置input和div元素的width和height为100%，position为absolute，left和top都为0。最后，将input的opacity设置为0，filter设置为alpha(opacity=0)。

如果想要用图片代替"Choose File"按钮，则将div中的文本内容替换为一个img元素，src属性为"yourimagefile"。

如果想要在浏览并选择文件后提交表单，可以在input元素上添加onchange事件，并将其值设置为"this.parentNode.parentNode.submit();"。

文章如下：

自定义CSS/HTML浏览上传图片表单
有多种方法可以实现，我更倾向于使用以下方式：


    
Upload

    


使用以下CSS代码：
.browse {
    position: relative;
    width: 100px;
    height: 20px;
}
.browse input, browse div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}
.browse input {
    opacity: 0;
    filter: alpha(opacity=0);
}
这样，上传文本将显示出来，但实际上您将点击浏览按钮。
是的，但是我希望用一个图片来代替默认的"Choose File"按钮。
然后将
Upload
替换为
。
好的，谢谢，但还有一个问题。在我浏览并选择文件后，是否会提交表单？
不会，如果您愿意，可以在input上添加onchange事件。将替换为。

0