如何设置文件上传按钮的样式 [英] How do I style a File Upload button

问题描述

我有一个文件上传按钮，我需要提交。我现在默认使用一些预设样式。

< form class = uploadButtonmethod =POSTaction =upload.phpenctype =multipart / form-data> < input type =filename =file []multiple>< / form>

$ b

解决方案

您可以尝试下面的代码

  form.uploadButton {position：relative; display：flex;} input [type =text] {width：200px; height：40px;盒子尺寸：边框; border-radius：2px; border：1px solid #ccc; margin-right：5px;} span {background：red; border：0;颜色：#fff; padding：0 20px;宽度：80px; text-align：center; line-height：40px; cursor：pointer;} input [type =file] {position：absolute;顶部：0;底部：0;左：0;正确：0;不透明度：0;光标：指针; width：100％;}  

< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><form class =uploadButtonmethod =action =enctype = 多部分/格式数据 > < input type =text> <跨度>浏览和LT; /跨度> < input type =filename =file []multiple>< / form>

$ b

I have a file upload button which i need to file. I currently defaults to some pre-set styles.

<form class="uploadButton" method="POST" action="upload.php" enctype="multipart/form-data">
  <input type="file" name="file[]" multiple>
</form>

解决方案

You can try the below code

$('input[type="file"]').on('change', function() {
  $('input[type="text"]').val($(this).val());
});
$('span').on('click', function() {
  $('input[type="text"]').val($('input[type="file"]').val());
});

form.uploadButton {
  position: relative;
  display: flex;
}

input[type="text"] {
  width: 200px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid #ccc;
  margin-right: 5px;
}

span {
  background: red;
  border: 0;
  color: #fff;
  padding: 0 20px;
  width: 80px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}

input[type="file"] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="uploadButton" method="" action="" enctype="multipart/form-data">
  <input type="text">
  <span>Browse</span>
  <input type="file" name="file[]" multiple>
</form>

这篇关于如何设置文件上传按钮的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！