Web前端之JavaScript实现选择文件功能、动态创建选择文件标签、上传、createElement、setAttribute、removeChild、appendChild

---

代码

Html

<button class="c_p" onclick="selectFile()">选择文件</button>

---

JavaScript

function selectFile() {
    let input = document.createElement('input');
    input.setAttribute("type", "file");
    input.style.display = 'none';

    // 添加事件监听器，当文件选择完成时触发
    input.addEventListener("change", (event) => {
        const fileObj = event.target.files[0];

        // 这里可以添加你希望执行的文件处理逻辑
        // 例如，你可以访问文件的属性，上传文件，或者进行其他操作
        if (fileObj) {
            console.log("fileObj: ", fileObj);
            console.log("name: ", fileObj.name);
            console.log("size: ", fileObj.size);

            // 这里可以继续处理文件... ...

            // 从页面中移除文件输入框
            document.body.removeChild(input);
            // 清空文件输入框
            input = undefined;
        } else {
            alert('选择文件有误');
        }
    });

    // 将输入框添加到页面中
    document.body.appendChild(input);

    // 手动触发文件选择对话框
    input.click();
}

---

appendChild

MDN

Node.appendChild方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么appendChild只会将它从原先的位置移动到新的位置(不需要事先移除要移动的节点)。
这意味着，一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。若要保留已在文档中的节点，可以先使用Node.cloneNode方法来为它创建一个副本，再将副本附加到目标父节点下。请注意，用cloneNode制作的副本不会自动保持同步。
如果给定的子节点是DocumentFragment，那么DocumentFragment的全部内容将转移到指定父节点的子节点列表中。

---

w3school

appendChild方法将节点(元素)作为最后一个子元素添加到元素。

---

removeChild

w3school

removeChild方法删除元素的子节点。
该方法以Node对象返回被删除的节点；如果节点不存在，则返回null。
子节点从是文档对象模型(DOM)中删除的。但是，可以修改返回的节点并将其插回DOM。

---

MDN

Node.removeChild方法从DOM中删除一个子节点。返回删除的节点。

---

setAttribute

w3school

setAttribute()方法添加指定的属性，并为其赋指定的值。
如果这个指定的属性已存在，则仅设置/更改值。
注意：HTML文档的HTMLElement对象还定义了对应所有标准HTML属性的JavaScript属性。因此，只有您需要设置非标准属性的时候，才需要使用该方法。

---

MDN

设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。
要获取某个属性当前的值，可使用getAttribute()；要删除某个属性，可使用removeAttribute()。

---

createElement

MDN

在HTML文档中，Document.createElement方法用于创建一个由标签名称tagName指定的HTML元素。如果用户代理无法识别tagName，则会生成一个未知HTML元素HTMLUnknownElement。

---

w3school

createElement方法创建元素节点。