input type=“file” 获取文件名、文件类型、文件大小

最新推荐文章于 2023-05-22 19:36:02 发布

原创最新推荐文章于 2023-05-22 19:36:02 发布 · 6.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #jquery

JavaScript 同时被 2 个专栏收录

13 篇文章

订阅专栏

ES6

2 篇文章

订阅专栏

本文介绍如何使用HTML中的input标签实现文件上传功能，并通过JavaScript获取所选文件的名称、大小及类型。同时，还提供了一个实用函数，用于将文件大小转换为更易读的KB、MB、GB或TB格式。

HTML代码

<input type="file" id="deviceFile">

获取文件名、文件大小、文件类型

  $('#deviceFile').bind('input propertychange', function () {


       let f = document.getElementById('deviceFile').files;
       let [fileName, fileSize, fileType] = [f[0].name, f[0].size, f[0].type];
                                      /*分别获取   文件名   文件大小   文件类型*/

       $('.importBtn').hide();
       $(this).parent('.importBtn').next().find('dt').text(f[0].name + '.' + f[0].type);
       $(this).parent('.importBtn').next().find('dd').text('(' + getfilesize(f[0].size) + ')')
       $(this).parent('.importBtn').next().show();
   })

将文件大小改成KB 、MB 、 G 、 T 格式

 function getfilesize(size) {//把字节转换成正常文件大小
            if (!size) return "";
            var num = 1024.00; //byte
            if (size < num)
                return size + "B";
            if (size < Math.pow(num, 2))
                return (size / num).toFixed(2) + "KB"; //kb
            if (size < Math.pow(num, 3))
                return (size / Math.pow(num, 2)).toFixed(2) + "MB"; //M
            if (size < Math.pow(num, 4))
                return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
            return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
        }