秦皇岛网站制作专家,网站建设与维护,做一年的网站维护价格,互联网金融p2p网站建设模板通过使用文件 API#xff0c;web 内容可以要求用户选择本地文件#xff0c;然后读取这些文件的内容。这种选择可以通过使用 HTML input typefile 元素或通过拖放来完成。
1.通过 click() 方法使用隐藏的文件 input 元素
你可以隐藏公认难看的文件 …通过使用文件 APIweb 内容可以要求用户选择本地文件然后读取这些文件的内容。这种选择可以通过使用 HTML input typefile 元素或通过拖放来完成。
1.通过 click() 方法使用隐藏的文件 input 元素
你可以隐藏公认难看的文件 input 元素并显示你自己的界面来打开文件选择器然后显示哪个或哪些文件被用户选中了。你可以通过给 input 元素添加 display:none 的样式再调用 input 元素的 click() 方法来实现。
inputtypefileidfilemultipleacceptimage/*styledisplay:none /
button iduploadBut typebutton选择一些文件/button
const uploadBut document.getElementById(uploadBut);
const file document.getElementById(file);// 用户点击文件上传按钮
uploadBut.addEventListener(click,(e) {if (file) {file.click();}},false,
);// input type:file 的change事件触发,执行拿到上柴男文件列表
file.addEventListener(change, () {console.log(file.files);
}) 2.使用拖放来选择文件 div classdropbox拖拽上传文件/div
let dropbox document.querySelector(.dropbox)dropbox.addEventListener(dragenter, dragenter, false)dropbox.addEventListener(dragover, dragover, false)dropbox.addEventListener(drop, drop, false)dropbox.addEventListener(dragleave, dragleave, false)function dragenter(e) {e.stopPropagation();e.preventDefault();}// 进入拖拽容器function dragover(e) {e.stopPropagation();e.preventDefault();}// 离开拖拽容器function dragleave(e) {e.stopPropagation();e.preventDefault();}// 将拖拽标签放在拖拽容器上(鼠标松开)function drop(e) {e.stopPropagation();e.preventDefault();const dt e.dataTransfer;const files dt.files;console.log(dt.files);}
实例 : 案例 - 拖拽上传文件,生成缩略图-CSDN博客
