网站页面做,沙井做网站的公司,网页设计图片之间空隙,详情页模板素材20240123----重返学习-原生js纯函数获取用户电脑上的文件 思路说明 通过外加点击后#xff0c;通过监听这个DOM元素的change事件#xff0c;在用户点击之后就能拿到用户电脑上的文件了。通过原生js来动态创建typefile的input元素#xff0c;之后给监听该元素的…20240123----重返学习-原生js纯函数获取用户电脑上的文件 思路说明 通过外加点击后通过监听这个DOM元素的change事件在用户点击之后就能拿到用户电脑上的文件了。通过原生js来动态创建typefile的input元素之后给监听该元素的change事件同时手动用代码触发该元素的点击事件。后面在该元素的change事件中就能拿到用户电脑上的文件。但后面发现用户打开弹窗但不先并不会触发input元素的change事件同时也不会触发typefile的input元素的input事件。在MDN文档中也没发现还有其它事件可以用。于是在网上找到一个思路就是用户选择文件或取消选择文件后window会触发focus事件可以在这里处理取消事件。为让事件更纯粹不造成负作用要移除创建的input元素。同时也要移除绑定到window上的focus事件。为了稳定返回的Promise的值一定会resolve掉即如果用户不选或者选择文件出错直接返回null。否则返回file类型的文件。 代码说明 纯js版 // 调用后,会让用户选择一个文件;中间如果用户取消了,返回null;否则返回该文件; const handleChooseFile async function handleChooseFile() {// [input file 文件框“取消”按钮事件]( https://www.jianshu.com/p/b41a21a399e4 )// [如何检测 html 的 input file 控件在文件输入时用户点击了“取消]( https://blog.csdn.net/yxp_xa/article/details/103696863 );// [监听 input typefile 文件上传取消事件]( https://blog.csdn.net/joe0235/article/details/130055087 );const thePromise new Promise((resolve, reject) {// 创建 input 元素const fileInput document.createElement(input);fileInput.type file;fileInput.style.display none; // 隐藏 input 元素document.body.appendChild(fileInput);// 用户取消选择或直接关闭,不会触发change事件;// 可以通过采取为当前window添加focus事件的方式来模拟取消事件只要控制这个focus事件在change事件之后执行就可以通过设置一个变量和setTimeout方法实现;const handleWindowFocus () {const handleFileCancel () {console.log(用户取消选择文件或选择文件出错);resolve(null);window.removeEventListener(focus, handleWindowFocus, false);if (document.body.contains(fileInput)) {document.body.removeChild(fileInput);}};setTimeout(handleFileCancel, 10000); //浏览器页面获取焦点事件早于onchange事件约20毫秒需要页面绑定的事件滞后执行使用 setTimeout 即可。};window.addEventListener(focus, handleWindowFocus, false); //文件选择对话框关闭无论是确定还是取消页面将重新获取焦点。const handleFileSelect function handleFileSelect() {console.log(handleFileSelect--);// 获取选择的文件const selectedFile fileInput.files ? fileInput.files[0] : null;if (selectedFile) {// 打印文件信息你可以在这里处理你的文件console.log(选择的文件:, selectedFile);resolve(selectedFile);if (document.body.contains(fileInput)) {document.body.removeChild(fileInput);}return;}// 用户取消选择文件或选择文件出错的情况console.log(用户取消选择文件或选择文件出错);resolve(null);if (document.body.contains(fileInput)) {document.body.removeChild(fileInput);}};// 监听 input 元素的 change 事件fileInput.addEventListener(change, handleFileSelect, false);// const handleFileInput function handleFileInput() {// console.log(handleFileInput--);// resolve(null);// if (document.body.contains(fileInput)) {// document.body.removeChild(fileInput);// }// };// // 监听 input 元素的 input 事件// fileInput.addEventListener(input, handleFileInput, false);// 模拟触发 input 元素的点击事件fileInput.click();});return thePromise; };handleChooseFile();//调用,会返回一个Promise;中间如果用户取消了,返回null;否则返回该文件;ts加类型版 // 调用后,会让用户选择一个文件;中间如果用户取消了,返回null;否则返回该文件; const handleChooseFile async function handleChooseFile() {// [input file 文件框“取消”按钮事件]( https://www.jianshu.com/p/b41a21a399e4 )// [如何检测 html 的 input file 控件在文件输入时用户点击了“取消]( https://blog.csdn.net/yxp_xa/article/details/103696863 );// [监听 input typefile 文件上传取消事件]( https://blog.csdn.net/joe0235/article/details/130055087 );const thePromise new PromiseFile | null((resolve, reject) {// 创建 input 元素const fileInput document.createElement(input);fileInput.type file;fileInput.style.display none; // 隐藏 input 元素document.body.appendChild(fileInput);// 用户取消选择或直接关闭,不会触发change事件;// 可以通过采取为当前window添加focus事件的方式来模拟取消事件只要控制这个focus事件在change事件之后执行就可以通过设置一个变量和setTimeout方法实现;const handleWindowFocus () {const handleFileCancel () {console.log(用户取消选择文件或选择文件出错);resolve(null);window.removeEventListener(focus, handleWindowFocus, false);if (document.body.contains(fileInput)) {document.body.removeChild(fileInput);}};setTimeout(handleFileCancel, 10000); //浏览器页面获取焦点事件早于onchange事件约20毫秒需要页面绑定的事件滞后执行使用 setTimeout 即可。};window.addEventListener(focus, handleWindowFocus, false); //文件选择对话框关闭无论是确定还是取消页面将重新获取焦点。const handleFileSelect function handleFileSelect() {console.log(handleFileSelect--);// 获取选择的文件const selectedFile fileInput.files ? fileInput.files[0] : null;if (selectedFile) {// 打印文件信息你可以在这里处理你的文件console.log(选择的文件:, selectedFile);resolve(selectedFile);if (document.body.contains(fileInput)) {document.body.removeChild(fileInput);}return;}// 用户取消选择文件或选择文件出错的情况console.log(用户取消选择文件或选择文件出错);resolve(null);if (document.body.contains(fileInput)) {document.body.removeChild(fileInput);}};// 监听 input 元素的 change 事件fileInput.addEventListener(change, handleFileSelect, false);// const handleFileInput function handleFileInput() {// console.log(handleFileInput--);// resolve(null);// if (document.body.contains(fileInput)) {// document.body.removeChild(fileInput);// }// };// // 监听 input 元素的 input 事件// fileInput.addEventListener(input, handleFileInput, false);// 模拟触发 input 元素的点击事件fileInput.click();});return thePromise; }; handleChooseFile();//调用,会返回一个Promise;中间如果用户取消了,返回null;否则返回该文件;进阶参考 input file 文件框“取消”按钮事件如何检测 html 的 input file 控件在文件输入时用户点击了“取消;监听 input typefile 文件上传取消事件;