erb
|
1 2 3 4 5 |
<div class="upload-btn-wrapper"> <button class="btn">Upload a file</button> <%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png', onChange:'inform()' %> <h3 id="file_name"></h3> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; } .btn { border: 2px solid gray; color: gray; background-color: white; padding: 8px 20px; border-radius: 8px; font-size: 20px; font-weight: bold; } .upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; } |
js
|
1 2 3 |
function inform(){ $("#file_name").text("画像が選択されています"); } |
実行1
実行2
