如何让链接表现为文件输入框-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，有时候需要让用户上传文件。通常我们使用 input 标签来实现这个功能，但是如果你想要一个更加灵活的解决方案，或者想要通过自定义样式来美化上传按钮，那么你可以考虑把链接表现为文件输入框。

原理

当我们点击链接时，会触发链接的默认行为，即跳转到链接指定的 URL 地址。但是，我们可以通过 JavaScript 来阻止默认行为，并替换成我们自己的行为。

具体来说，我们可以创建一个隐藏的 input 元素，然后在点击链接时触发它的 click 事件，弹出文件选择框。选择文件后，我们就可以通过 JavaScript 获取到所选文件的信息，并进行上传等操作。

实现步骤

在 HTML 中添加一个链接，例如：

<a href="#" id="upload-link">选择文件</a>

创建一个隐藏的 input 元素，并设置其 type 属性为 "file"，如下：
```
<input type="file" id="file-input" style="display:none">
```

使用 JavaScript 监听链接的点击事件，并在事件处理函数中触发 input 元素的 click 事件：

const link = document.getElementById('upload-link');
const input = document.getElementById('file-input');
link.addEventListener('click', () => {
  input.click();
});

在选择文件后，我们可以通过 input 元素的 files 属性来获取到所选文件的信息，并进行上传等操作。例如，以下代码会在控制台输出所选文件的名称：
```
input.addEventListener('change', () => {
  console.log(input.files[0].name);
});
```

示例代码

-- -------------------- ---- -------
--------- -----
------
------
  -------------------------
-------
------
  -- -------- -------------------------
  ------ ----------- --------------- ---------------------
  --------
    ----- ---- - ---------------------------------------
    ----- ----- - --------------------------------------
    ------------------------------ -- -- -
      --------------
    ---
    -------------------------------- -- -- -
      ---------------------------------
    ---
  ---------
-------
-------

结语

通过让链接表现为文件输入框，我们可以实现更加灵活和美观的文件上传功能。同时，这个技巧也涉及了 JavaScript 中阻止默认行为、事件监听和 DOM 操作等基础知识点，对于初学者来说是一个很好的练手项目。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/29957