How to style file upload input using font awesome icon and then show the file name with a specific style?

Question

I have this code:

<div class="clip-upload">
 <label for="file-input">
  <i class="fa fa-paperclip fa-lg" aria-hidden="true"></i>
 </label>
 <input type="file" name="file-input" id="file-input">
</div>

with the CSS:

.clip-upload > input
{
    display: none;
}

so that it's just the paper clip icon that shows up as the button to upload a file.

I have 2 questions:

1. How can I make the name of the file uploaded appear as it does with a regular upload input? Note: I don't want it to replace the paper clip icon, I want the file names to be positioned on the page, with CSS (like in a new row, see below image).

2. How can I style this file name so that it has a background color, and border radius, like this:

Answer 1

You may have to use a lil jQuery (can be done in vanilla JS too) to use another element to contain the file name

• hide your input
• use the paperclip as your button
• on change you can grab the value of the input file name and add it to the newly created element.

Note: the appended names will not actually submit this way I will leave that to you.

 $(document).ready(function() { $('.file-input').change(function() { $file = $(this).val(); $file = $file.replace(/.*[\\/\\\\]/, ''); //grab only the file name not the path $('.filename-container').append("<span class='filename'>" + $file + "</span>").show(); }) }) 

 .rounded { height: 30px; border-radius: 4px; padding: 4px; } .in1 { width: 120px; } .in2 { width: 350px; } i { margin: 0 8px; } .filename-container { margin: 20px 20px 0 0; } .filename { display: inline-block; padding: 0 10px; margin-right: 10px; background-color: #ccc; border: 1px solid black; border-radius: 15px; height: 20px; line-height: 20px; text-align: center; font-weight: 700; font-size: 12px; font-family: 'verdana', sans-serif; } .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="clip-upload"> <input class="rounded in1" value="other input" /> <input class="rounded in2" value="other input larger" /> <label for="file-input"> <i class="fa fa-paperclip fa-lg" aria-hidden="true"></i> </label> <i class="fa fa-play fa-lg"></i> <input type="file" class="file-input hide" name="file-input" id="file-input"> <div class="filename-container hide"></div> </div> 

Answer 2

使用DXImageTransform过滤器CSS属性和HTML5 FileReader API，将直接从HTML Input FileUpload显示图像。

Please check this https://jsfiddle.net/jaanhaitojahanhai/7zadcqy7