jquery获取文件表单所选文件的路径、名称、大小和类型

一.问题

使用文件表单时，您想知道所选文件的路径、名称、大小和类型吗？

二、知识点

1.1 .输入表单将触发变更事件

2.找到路。触发此事件的对象调用val()函数

3.将有一个事件对象e.currentTarget.files[0]。文件名后的名称触发事件

4.文件大小e.currentTarget.files[0]。大小字节

文件类型为e.currenttarget.files [0]类型。

第三，测试代码

正文p类='inp_file_name '未选中/p输入类型=' file '类='inp_file '按钮类=' cancel _ file _但是'清除所选文件/按钮/正文脚本src=' http3360。/js/jquery-3 . 3 . 1 . js '/script script $('。InP _ file’)。change(function(e){//console . log($(this))。val())；//val()获取完整的文件路径值；c : \ fake path \ js-DOM . pngconsole . log(e)/*只需获取所选文件的名称。由currentTarget:获取的对象是一个数组。如果支持多个文件，则需要遍历*/varfile msg=e . current target . files；var fileName=fileMsg[0]。姓名；console . log(FIlename)；//js-DOM . png//size byte var fileSize=FileMSg[0]。大小；console.log(文件大小)；//350061//type var fileType=file msg[0]。类型；console . log(FileType)；//image/png //判断文件类型vartype=(file type . substr(file type . last indexof(' . ')))).to lower case()；if(键入！='.jpg'type！='.gif类型！='.' jpeg '类型！='.png'){ alert('您上传的图片类型不匹配(。jpg|。jpeg|。gif|。png)！”);返回false} $('.InP _ file _ name’)。文本(fileName) }) $('。cancel _ file _ but’)。单击(function(){ $(')。InP _ file’)。val(null)；})/脚本四。影响

在被选中之前

选择后

如果有任何不足，请给我你的建议！希望给大家带来帮助！

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接