我已经使用CSS设置了文件输入的样式:
.custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; } <form> <label for="file-upload" class="custom-file-upload"> <i class="fa fa-cloud-upload"></i> Upload Image </label> <input id="file-upload" name='upload_cont_img' type="file" style="display:none;"> </form>
一切正常,但是我想显示所选的文件名。使用CSS或jQuery怎么可能?
您必须绑定并触发[type=file]元素上的change事件,并将文件名读取为:
[type=file]
$('#file-upload').change(function() { var i = $(this).prev('label').clone(); var file = $('#file-upload')[0].files[0].name; $(this).prev('label').text(file); }); .custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label for="file-upload" class="custom-file-upload"> <i class="fa fa-cloud-upload"></i> Upload Image </label> <input id="file-upload" name='upload_cont_img' type="file" style="display:none;"> </form>