inputfile如何添加webkitdirectory

打开Sublime text3编辑器，这里创建一个HTML文档。

首先必须创建form和input标签。

input里面的type需要输入file。

这个时候就有提供选择的按钮。

我们点击浏览，就可以选择指定文件。

我们添加一下文件提示用户。

接下来我们输入id和name的信息。

如果要改为选取文件夹，那么需要添加webkitdirectory multiple。记得要把提示文字改为文件夹。这个时候点击按钮，选中文件夹的时候就有上传按钮的显示，而不是打开

if(e.target.accept != 'image/png'){

    return alert(' 即使input标签上已经有accept格式的显示,但在用户上传可以从所有文件中选其他格式的文件，所以第二次处理格式 ’)

}

if(e.target.files[0].size >1024*1024*1){

    return alert('上传文件不能大于1M')

}

if(e.target.files.length>1){

    return alert('只能上传1个文件')

}

var url = window.webkitURL.createObjectURL(file)   // 上传图片预览路径

每个file对象包含以下属性：

lastModified：数值，表示最近一次修改时间的毫秒数；

lastModifiedDate：对象，表示最后一次表示最近一次修改时间的Date对象（高程中说是字符串，根据上图可看出应该为对象，为了层级清晰未对其展开，大家可自行查看，其可调用Date对象的有关方法，例如getDay方法）；

name：本地文件系统中的文件名；

size：文件的字节大小；

type：字符串，文件的MIME类型；  -->  上传文件类型<input accept="文件类型" type="file">

weblitRelativePath：此处为空；当在input上加上webkitdirectory属性时，用户可选择文件夹，此时weblitRelativePath表示文件夹中文件的相对路径 比如：

FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。我们可以通过html5提供的FileReader读取到文件中的数据。

参考博客:  https://www.cnblogs.com/youhong/p/7221080.html?utm_source=itdadao&utm_medium=referral  

参考博客: https://www.cnblogs.com/fozero/p/8835628.html

---