刪除輸入文件按鈕和樣式選擇的文件

Question

我想創建一個需要多個圖像的上傳表單。我希望能夠刪除的「選擇文件」按鈕，但保持告知哪些文件，他們將要上傳用戶「選擇無文件」。

我知道我可以設置不透明度爲0輸入類型文件的造型，但這種刪除文本既「選擇文件」和「選擇無文件」。

Here is the codepen of the image uploader so far.

總結：

• 我想刪除的選擇文件按鈕
• 保持在未選擇任何文件的文本。

下面是HTML：

<div class="upload"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1>Would you like to <span style='color: lightgreen;'>Upload</span> or <span style='color: orangered;'>Delete</span> a file?</h1> 
       <div style="position: relative; height: 275px;"> 
        <form action="" method="post" enctype="multipart/form-data" class="formUp"> 

         <input type="file" name="fileToUpload[]" id="fileToUpload" accept="image/*" multiple="multiple"><p>Click here to upload images.</p></input> 
         <input type="submit" value="Upload Images" name="submitUpload" /> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

這裏是CSS：

.up { 
    border: none; 
} 

.upload { 
    padding-top: 6%; 
} 

.upload input[type='file'] { 
    outline: none; 

    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

.formUp { 
    border: 4px dashed black; 
    width: 400px; 
    height: 200px; 
    position: absolute; 
} 

.formUp p { 
    text-align: center; 
    width: 100%; 
    height: 100%; 
    line-height: 170px; 
    font-weight: bold; 
    font-size: 1.5em; 
} 

.upload input[type='submit'] { 
    margin-top: 2%; 
    width: 100%; 
    height: 20%; 
} 

.upload input[type='submit'] { 
    background: #0AC986; 
    dispaly: inline-block; 
    width: 100%; 
    font-size: 16px; 
    height: 50px; 
    color: #fff; 
    text-decoration: none; 
    border: none; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
} 

.upload input[type='submit']:hover { 
    color: #F37272; 
    background-color: palegreen; 
} 

.upload input[type='submit'] { 
    -o-transition: all .3s; 
    -moz-transition: all .3s; 
    -webkit-transition: all .3s; 
    -ms-transition: all .3s; 
} 

.upload input[type='submit']:hover { 
    color: red; 
} 

Answer 1

據我所知，我們不能做很多事情的風格輸入文件。我們可以做的是使用不透明度和外觀技巧，並使輸入文件覆蓋父元素，因此用戶仍然會收到輸入文件的點擊事件。

此外，您還需要使用JavaScript/jQuery來處理您的需求。如果使用javascript/jQuery對您來說不是問題，請在您的[Codepen] [1]下面進行示例實現。

[1]: http://codepen.io/mahdaen/pen/Ejwodb 

Answer 2

的text-indent屬性將操縱的位置選擇文件按鈕，但離開未選擇任何文件文本。

 

    .upload input[type='file'] 
    { 
     text-indent: -999em; 
     outline: none; 
     width: 100%; 
     height: 100%; 
     position: absolute; 
    }