如何使用jquery显示自定义样式输入文件的文件名？
我已经使用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事件，并将文件名读取为：
$('#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>
-
抛出
-
问题内容： 我有一个具有文件上传功能的表单，如果用户尝试上传的文件太大，我希望能够有一些不错的客户端错误报告，是否有一种方法可以使用jQuery检查文件大小，或者纯粹是在客户端上还是以某种方式将文件发布回服务器以进行检查？ 问题答案： 您实际上没有访问文件系统的权限（例如，读取和写入本地文件），但是，由于HTML5FileApi规范，您确实可以访问某些文件属性，并且文件大小是其中之一。 对于下面的
-
在PyCharm中，是否可以为文件定义语法高亮的自定义规则，这些规则结合了两种不同语言的语法？ 一个有点做作的例子：以下文件应被视为HTML，脚本标记中的文本除外，脚本标记应视为Python代码。 让代码完成工作的加分。 注意“IntelliLang”扩展特性并不合适，因为在第二个块中，它看不到前面块中声明的变量。
-
问题内容： 我在Java项目中使用log4j。我想配置另一个文件，而不是log4j.properties。有人可以帮助我吗？ 问题答案： 使用一次 您只需通过系统参数指定log4j文件的路径：
-
我的应用程序由两个组件组成。 在左边，我有一个文本区域，它将输入保存到一个状态变量中，传递给另一个组件，该组件将“翻译”输入并显示else。由于输入将被翻译成html代码，所以我想在右边显示样式化的代码（这是一个电子邮件表单，将被更改为将被更改为>)。 因此最终结果将是带有内联样式的html代码。我如何输出结果的样式和所有？ 这个主意在我脑子里有点像密码本。谢谢！ 到目前为止，我已经完成了这些组件
-
问题内容： 我想在基于类的我自己的组件的某些部分中使用主题。我什么都做不了，文档中的所有示例都是针对功能组件的。基本上，主题是定义好的，我想用它来设置自己的组件样式，这样我就可以避免重复自己并在更高级别上更改代码，并且该代码随处可见。 我的App.js 我的问题文件Nav.js 问题答案： 您不能与类组件一起使用。返回一个只能在功能组件中使用的自定义钩子。对于类组件，可以使用withStyles来