功能: 在web应用程序中、读取文件

男娘i 2024-02-19 10:00 27阅读 0赞

通过使用文件 API，web 内容可以要求用户选择本地文件，然后读取这些文件的内容。这种选择可以通过使用 HTML `<input type="file">` 元素或通过拖放来完成。

### [1.通过 click() 方法使用隐藏的文件 input 元素][1._ click_ _ input] ###

你可以隐藏公认难看的文件 [<input>][input] 元素并显示你自己的界面来打开文件选择器，然后显示哪个或哪些文件被用户选中了。你可以通过给 input 元素添加 `display:none` 的样式，再调用 [<input>][input] 元素的 [click()][click] 方法来实现。

<input
      type="file"
      id="file"
      multiple
      accept="image/*"
      style="display:none" />
    <button id="uploadBut" type="button">选择一些文件</button>

![99226c1ebc9d4895bdf3f98cd65c8cf6.png][]

### [2.使用拖放来选择文件][2.] ###

<div class="dropbox">拖拽上传文件</div>

**实例 :** [案例 - 拖拽上传文件,生成缩略图-CSDN博客][- _-CSDN]

[1._ click_ _ input]: https://developer.mozilla.org/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications#%E9%80%9A%E8%BF%87_click_%E6%96%B9%E6%B3%95%E4%BD%BF%E7%94%A8%E9%9A%90%E8%97%8F%E7%9A%84%E6%96%87%E4%BB%B6_input_%E5%85%83%E7%B4%A0
[input]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input
[click]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/click
[99226c1ebc9d4895bdf3f98cd65c8cf6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/41536a49398e41afa54bfe8e72a796a9.png
[2.]: https://developer.mozilla.org/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications#%E4%BD%BF%E7%94%A8%E6%8B%96%E6%94%BE%E6%9D%A5%E9%80%89%E6%8B%A9%E6%96%87%E4%BB%B6
[- _-CSDN]: https://blog.csdn.net/Qhx20040819/article/details/134298414