时间戳

首页 > 解决方案 > 输入 [type=file] 文本上传文件，我面临上传文件显示问题

html - 输入 [type=file] 文本上传文件，我面临上传文件显示问题

问题描述

下面的代码我尝试通过本地浏览器制作上传文件，但它只是打开浏览器，哪个文件正在上传它没有显示。请帮助我在哪里做错了。

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
.md-form {
    position: relative;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.file-field {
    position: relative;
}
.btn-floating {
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
    position: relative;
    z-index: 1;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    transition: all .2s ease-in-out;
    margin: 10px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    width: 47px;
    height: 47px;
}
.waves-effect {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mt-0, .my-0 {
    margin-top: 0!important;
}
.peach-gradient {
    background: linear-gradient(40deg,#ffd86f,#fc6262,#ffd86f)!important;
}
.float-left {
    float: left!important;
}

.btn-floating i {
    display: inline-block;
    width: inherit;
    text-align: center;
    color: #fff;
}
.btn-floating i {
    font-size: 1.25rem;
    line-height: 47px;
}



.file-field .file-path-wrapper {
    overflow: hidden;
    padding-left: 10px;
    height: 2.5rem;
}
form input[type=text]:not(.browser-default), .md-form input[type=time]:not(.browser-default), .md-form input[type=url]:not(.browser-default), .md-form textarea.md-textarea {
    box-sizing: content-box;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ced4da;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.file-field input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}
<!DOCTYPE HTML>
<html>
<head><title>File Upload with Material Design</title>
</head>
<body>
<!--Card-->

<!--/.Card-->
<!--Card-->
<div class="card" style="width: 400px; margin: 40px; padding: 30px; background-color: #b1bace;">
  <!--<img class="card-img-top" src="../images/instruction.jpg" alt="Card image cap">-->
  <div class="card-body" style="margin-bottom: 20px; ">
    <h2 class="card-title" style="color: #fff;">Card title</h2>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
       <form class="md-form" class="mb-3">
    <div class="file-field">
      <a class="btn-floating peach-gradient mt-0 float-left">
        <i class="fa fa-upload" aria-hidden="true"></i>
        <input type="file">
      </a>
      <div class="file-path-wrapper">
        <input class="file-path validate" type="text" placeholder="Upload your file">
      </div>
    </div>
  </form>
  </div>
  </body>
  </html>

上面的代码我尝试通过本地浏览器制作上传文件，但它只是打开浏览器，哪个文件正在上传它没有显示。请帮助我在哪里做错了。

标签： htmlcss

解决方案

希望能帮助到你。

$('#trigger').change(function(e){
        var fileName = e.target.files[0].name;
		$('#placeholder').attr("placeholder", fileName);
    });	
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
.md-form {
    position: relative;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.file-field {
    position: relative;
}
.btn-floating {
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
    position: relative;
    z-index: 1;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    transition: all .2s ease-in-out;
    margin: 10px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    width: 47px;
    height: 47px;
}
.waves-effect {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mt-0, .my-0 {
    margin-top: 0!important;
}
.peach-gradient {
    background: linear-gradient(40deg,#ffd86f,#fc6262,#ffd86f)!important;
}
.float-left {
    float: left!important;
}

.btn-floating i {
    display: inline-block;
    width: inherit;
    text-align: center;
    color: #fff;
}
.btn-floating i {
    font-size: 1.25rem;
    line-height: 47px;
}



.file-field .file-path-wrapper {
    overflow: hidden;
    padding-left: 10px;
    height: 2.5rem;
}
form input[type=text]:not(.browser-default), .md-form input[type=time]:not(.browser-default), .md-form input[type=url]:not(.browser-default), .md-form textarea.md-textarea {
    box-sizing: content-box;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ced4da;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.file-field input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head><title>File Upload with Material Design</title>
</head>
<body>
<!--Card-->

<!--/.Card-->
<!--Card-->
<div class="card" style="width: 400px; margin: 40px; padding: 30px; background-color: #b1bace;">
  <!--<img class="card-img-top" src="../images/instruction.jpg" alt="Card image cap">-->
  <div class="card-body" style="margin-bottom: 20px; ">
    <h2 class="card-title" style="color: #fff;">Card title</h2>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
       <form class="md-form" class="mb-3">
    <div class="file-field">
      <a class="btn-floating peach-gradient mt-0 float-left">
        <i class="fa fa-upload" aria-hidden="true"></i>
        <input type="file" id="trigger">
      </a>
      <div class="file-path-wrapper">
        <input id="placeholder" class="file-path validate" type="text" placeholder="Upload your file">
      </div>
    </div>
  </form>
  </div>
  </body>
  </html>

推荐阅读