嗨，我只是想知道如何创建自己的自定义文件上传按钮，因为我能做的最好的是
我想要实现的是
如果有任何这样做，我会非常感激，请我能有答案来解释如何使用代码而不是包含允许您下载按钮或类似内容的网站链接的答案，谢谢:)
自定义上传按钮
IT技术
javascript
upload
2021-03-14 00:33:11
6个回答
尽管其中一些答案会创建看起来像您希望它工作的东西，但是当它们尝试按照您期望的方式执行时，它们会崩溃。文件输入的样式不好直接，您将无法尝试。然而，有一个技巧。
诀窍是将输入的不透明度设为 0，然后将其下方的背景更改为您想要的按钮样式。
.file_button_container,
.file_button_container input {
height: 47px;
width: 263px;
}
.file_button_container {
background: transparent url(http://i.stack.imgur.com/BT5AB.png) left top no-repeat;
}
.file_button_container input {
opacity: 0;
}<div class="file_button_container"><input type="file" /></div>我认为您也可以尝试这样做：
创建一个<label for="X"></label>可以使用 CSS 轻松设置样式的附加元素
<div class="container">
<label for="upload" class="uploadButton">Upload</label>
<input type="file" name="upload" id="upload">
</div>
喜欢
.container {
position: relative;
}
.uploadButton {
height: 25px;
width: 66px;
display: block;
cursor: pointer;
background: url('http://www.ifunia.com/images/christmas/youtube-upload-button.gif') center center no-repeat;
}
input[type="file"] {
display: block;
width: 66px;
height: 25px;
clip: rect(0px 0px 0px 0px);
position: absolute;
left: 0;
top: 0;
}<form>
<div class="container">
<label for="upload" class="uploadButton"></label>
<input type="file" name="upload" id="upload" required />
</div>
<hr/>
<button type="submit">Submit</button>
</form>箭头不是你可以“只用代码来做”的东西，圆角在 Firefox 中可以正常工作，但在 ie 使用 css 时不行......如果你只需要使用自定义图像，这很容易：
css：
#my_upload_button{
background-image:url(path-to-file.png);
border:none;
}
在 Vue JS 中如果你想把上传图片按钮放在 textarea 内使用相对和绝对位置将相机图标放在 textarea 内使用 bottom-3 right-4 找到合适的位置
<div class="field relative">
<label>Description</label>
<textarea class="textarea" v-model="description" type="text" maxlength="10000"> </textarea>
<label for="upload-file" class="icn icn-camera cursor-pointer absolute bottom-3 right-4">
<input type="file" id="upload-file" hidden ref="file" @change="getImage($event)" accept="image/**" />
</label>
</div>
如果不在 textarea 框内，只需一个自定义上传按钮，然后保留这样的代码
<label for="upload-file" class="icn icn-camera cursor-pointer">
<input type="file" id="upload-file" hidden ref="file" @change="getImage($event)" accept="image/**" />
</label>
将默认上传文件图标更改为相机图标
使用 CSS 按 id 或 class 设置按钮样式。
这可能会有所帮助：http : //speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/