首页 > 软件开发 > HTML >

input file如何实现选择文件夹

来源:互联网 2023-03-16 19:15:45 414

input file如何实现选择文件夹,input是HTML里面其中一个标签,需要配合form标签一起使用,而input里面有一个类型file就是提供文件夹的选取的。1HY办公区 - 实用经验教程分享!

input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

工具/原料

  • 网页浏览器,例如Chrome
  • 编辑器,比如Sublime text3

方法/步骤

  • 1

    打开Sublime text3编辑器,这里创建一个HTML文档。1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

  • 1本页面未经许可获取自百度经验
  • 2

    首先必须创建form和input标签。1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

  • 3

    input里面的type需要输入file。1HY办公区 - 实用经验教程分享!

    这个时候就有提供选择的按钮。1HY办公区 - 实用经验教程分享!

    我们点击浏览,就可以选择文件。1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

  • 4

    我们添加一下文件提示用户。1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

  • 5

    接下来我们输入id和name的信息。1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

  • 6

    如果要改为选取文件夹,那么需要添加webkitdirectory multiple。1HY办公区 - 实用经验教程分享!

    记得要把提示文字改为文件夹。1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

  • 7

    这个时候点击按钮,选中文件夹的时候就有上传按钮的显示,而不是打开。1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

    input file如何实现选择文件夹1HY办公区 - 实用经验教程分享!

  • 注意事项

    • 一些老的浏览器显示不了这个功能

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!1HY办公区 - 实用经验教程分享!


    标签: HTML文件夹

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码