学习笔记：网页上传文件时页面显示文件对应格式图片

诈尸一下（）

夜雀食堂很好玩，请玩。

（steam上看到的图，很喜欢）

正文

最近在做一个网页的前端，同时学习写js代码。在研究文件上传界面的美化时，从mdn上找到了一个美化input中type='file'的方案。

链接如下：<input type="file"> - HTML（超文本标记语言） | MDN

在这个例子中，文件格式被限制为了图片格式，文件被选中后会呈现如下效果：

例子中，js代码会将选中文件的图片直接贴入html对应的img中。在我正在制作的项目中，用户需要在网页中上传doc、docx与pdf文件。在选择文件后，网页会根据所选择的文件格式选择文件夹中对应的格式图片填入img的位置。那么要怎么改进原代码才能实现我的需求呢？

方法没有太多原创（）基本是修修补补原有代码。

步骤一：改变文件格式要求

原来的代码中，对格式限制的代码片段为：

//声明变量fileTypes，它是一个数组，其中包含了image的各种MIME类型
const fileTypes = [
  "image/apng",
  "image/bmp",
  "image/gif",
  "image/jpeg",
  "image/pjpeg",
  "image/png",
  "image/svg+xml",
  "image/tiff",
  "image/webp",
  "image/x-icon",
];

这个链接可以看到各种文件的MIME类型：MIME 参考手册

将格式改成我们想要的：

const fileTypes = [
        "application/msword",
        //doc的
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        //docx的
        "application/pdf",
        //pdf的
    ];

检验格式的代码与函数如下：

//获取input的文件
const curFiles = input.files;
//循环遍历所有选择的文件
for(const file of curFiles){
                //li是html中的列表项，相当于给所选择的每个文件创建一个列表项
                const listItem = document.createElement("li");
                //para用于表示列表项中的文字内容
                const para = document.createElement("p");
                //调用函数判断文件类型
                if (validFileType(file)) {
        //.textContent是DOM元素的一个属性，用于设置或获取元素的文本内容
        //判断为true，将p表示为这样的模版字符串，即文件名+文件大小。文件大小的函数直接用原版的就可以
        para.textContent = `${file.name}; ${returnFileSize(
          file.size,
        )}.`;
        //将para添加到子列表中
        listItem.appendChild(para);
                }
                //判断为False执行
                else{
                    para.textContent = `File bame ${file.name}: 不是
                    正确的格式，请更换正确的文件格式。`;
                    listItem.appendChild(para);
                }

                list.appendChild(listItem);
            }

function validFileType(file){
        //返回文件类型
        return fileTypes.includes(file.type);
    }

这里是代码片段不能直接搬走用（）

步骤二：增加图片调用函数

我们的重点在于展示文件格式对应的图标，因此只需要对文件的类型进行判断。如果是pdf格式，就在img的位置上添加提前下载好的pdf格式图标，以此类推。图标可以从阿里巴巴图标库下载（注意商用问题）。直接上代码。

//上接模版字符串的代码
//声明image变量，用于在列表项中创建img
const image = document.createElement("img");
//imge.src用于获取图片路径，ChangeFileImage(file)调用函数，用于获取对应图标路径
        image.src = ChangeFileImage(file);
        //子元素中添加图片
        listItem.appendChild(image);
//下接listItem.appendChild(para);

function ChangeFileImage(file){
        //doc返回都曾图标对应的路径，路径需要改成自己的，下同
        if(file.type == "application/msword"){
            return '.\\img\\doc.png';
        }
        else if(file.type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document"){
            return '.\\img\\docx.png';
        }
        else{
            return '.\\img\\pdf.png';
        }
    }

这样就基本实现了我们所想要编写的功能。看看效果。

（萝莉丝可爱捏）

完整代码如下（只有这段的完整代码，其他部分都可以直接使用原来的代码）

const curFiles = input.files;
            if (curFiles.length == 0){
                //未选择文件
                const para = document.createElement("p")
                para.textContent = "未选择相关文件";
                preview.appendChild(para);
            }
            else{
                const list = document.createElement("ol");
                preview.appendChild(list);

            for(const file of curFiles){
                const listItem = document.createElement("li");
                const para = document.createElement("p");
                if (validFileType(file)) {
        para.textContent = `${file.name}; ${returnFileSize(
          file.size,
        )}.`;
        const image = document.createElement("img");
        image.src = ChangeFileImage(file);
        listItem.appendChild(image);
        listItem.appendChild(para);
                }
                else{
                    para.textContent = `File bame ${file.name}: 不是
                    正确的格式，请更换正确的文件格式。`;
                    listItem.appendChild(para);
                }

                list.appendChild(listItem);
            }
        }

function validFileType(file){
        return fileTypes.includes(file.type);
    }

//文件大小
function returnFileSize(number){
        if(number < 1024){
            return `${number} bytes`;
        }
        else if(number >= 1024 && number < 1048576){
            return `${(number / 1024).toFixed(1)} KB`;
            //保留一位小数
        }
        else if(number >= 1048576){
            return `${(number / 1048576).toFixed(1)} MB`;
        }
    }

function ChangeFileImage(file){
        //img.src = URL.createObjectURL(file);
        if(file.type == "application/msword"){
            return '.\\img\\doc.png';
        }
        else if(file.type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document"){
            return '.\\img\\docx.png';
        }
        else{
            return '.\\img\\pdf.png';
        }
    }

以上就是前段时间的小小学习笔记与自己的一点改进，可能有错误或者语言表示不标准的部分，欢迎大家批评指正，谢谢各位观看（鞠躬）。