erb
<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
.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
function inform(){ $("#file_name").text("画像が選択されています"); }
実行1
実行2