Я хочу настроить ввод этого типа файлов, используя css - PullRequest
Новая
       0

Я хочу настроить ввод этого типа файлов, используя css

0 голосов
/ 04 февраля 2020

Я использовал приведенный ниже код для индивидуальной настройки, но он не работает и не отвечает моим требованиям, поэтому у кого-то есть представление об этом, и тогда он поможет мне решить эту проблему. Это должно выглядеть так, как показано на рисунке. Мне нужно загрузить файл lo go справа и ввод только для чтения. enter image description here

.it .btn-orange
{
    background-color: blue;
    border-color: #777!important;
    color: #777;
    text-align: left;
  width:100%;
}
.it input.form-control
{
    
    border:none;
  margin-bottom:0px;
    border-radius: 0px;
    border-bottom: 1px solid #ddd;
    box-shadow: none;
}
.it .form-control:focus
{
    border-color: #ff4d0d;
    box-shadow: none;
    outline: none;
}
.fileUpload {
    position: relative;
    overflow: hidden;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
        .upl{
            border: 1px solid black;
            float: left;
            margin-top: -20px;margin-left: 172px;
            background-color: lightslategray;
        }
<body style="background-color: #00ced1">
   <div class="form-group">
<div class="input-group">
  <input type="text" class="form-control" readonly>
<div class="input-group-btn">
  <span class="fileUpload btn btn-success">
      <span class="upl" id="upload">Upload</span>
      <input type="file" class="upload up" id="up" onchange="readURL(this);" />
    </span><!-- btn-orange -->
 </div><!-- btn -->
 </div><!-- group -->
 </div>
</body>

Ответы [ 3 ]

2 голосов
/ 04 февраля 2020

Если вы используете Bootstrap4 , тогда не нужно писать одну строку кода CSS, просто введите jQuery код для отображения имени файла после изменения и тег input file, помещенный в label tag
Надеюсь, приведенный ниже фрагмент поможет вам. 

$(document).on('change', '[data-imageload]', function(e){
  $($(this).data('imageload')).html(e.target.files[0].name).attr('title', e.target.files[0].name);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container my-3">
  <div class="row justify-content-center">
    <div class="col-sm-12 col-md-6">
      <div class="form-group">
        <label class="input-group form-file">
          <input type="file" data-imageload="#filename" hidden>
          <span class="form-control rounded-left text-truncate" id="filename">Select file to verify skill(s)</span>
          <div class="input-group-append">
            <span class="input-group-text">Upload</span>
         </div>
       </label>
      </div>
   </div>
  </div>
</div>
2 голосов
/ 04 февраля 2020

попробуйте этот код: 

label.custom_file {
    border  : 1px solid grey;
    width   : 300px;
    padding : 8px;
    height  : 45px;
    position: relative;
    cursor: pointer;
}

label.custom_file:before {
    content         : '\f0c6';
    position        : absolute;
    right           : 0;
    top             : 0px;
    padding         : 9px 15px;
    border-left     : 1px solid #929292;
    height          : 43px;
    background-color: #f5f5f5;
}
<html>

<head>
<title> Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
	href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head>

<body>
<div class="form-group">
	<input type="file" class="form-control" id="file" style="display: none;">
	<label for="file" class="custom_file"> select file</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>

</html>
1 голос
/ 04 февраля 2020

Вы можете достичь результата с помощью селектора CSS :after. Смотрите изменения и примечания, которые я добавил в ваш код, и внесите необходимые изменения 

$(function ()  {

$("input[type=text]").click(function () {

// Check when the value of the file field changes
$(".upload").trigger("click").on("change", function () {

// Use the value of the file field fo the text field value
$("input[type=text]").val($(this).val());

});

});

});
.it .btn-orange {
  background-color: blue;
  border-color: #777!important;
  color: #777;
  text-align: left;
  width: 100%;
}

.it input.form-control {
  border: none;
  margin-bottom: 0px;
  border-radius: 0px;
  border-bottom: 1px solid #ddd;
  box-shadow: none;
}

.it .form-control:focus {
  border-color: #ff4d0d;
  box-shadow: none;
  outline: none;
}

.fileUpload {
  position: relative;
  overflow: hidden;
}

.fileUpload input.upload {
  position: absolute;
  top: -10px!important;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

/* I made additions from here */

.upl {
  border: 1px solid black;
  float: left;
  margin-top: -39px;
  margin-left: 272px;
  background-color: lightslategray;
  height: 39px!important;
  width: 70px;
  border: none;
  background: #eaeaea;
  position: relative;
  pointer-events: none;
}

.upl:after {
  content: "attach_file"; /* Name of the icon as content */
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center!important;
  line-height: 39px;
  font-family: Material Icons; /* You must declare font family */
  font-size: 24px;
  pointer-events: none; /* So that the :after selector doesn't block the button click */
}

input[type=text] {
  width: 300px;
  border: 1px solid #eaeaea;
}

input[type=text],
#upload {
  position: relative;
  height: 35px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body style="background-color: #00ced1">
  <div class="form-group">
    <div class="input-group">
      <input type="text" class="form-control" readonly>
      <div class="input-group-btn">
        <span class="fileUpload btn btn-success">
      <span class="upl" id="upload"></span>
        <input type="file" class="upload up" id="up" onchange="readURL(this);" />
        </span>
        <!-- btn-orange -->
      </div>
      <!-- btn -->
    </div>
    <!-- group -->
  </div>
</body>

  • Не забудьте библиотеку значков, которую вы решили использовать. Значки Fontawesome или Материал.

  • Не просто скопируйте ответ, прочитайте мои комментарии, чтобы узнать.

  • Дайте мне знать, если у вас есть какие-либо вопросы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...