我正在创建一个 JS 调查，我想打开一个 <input type="file"/>但打不开。
一些背景信息:
- 我只使用 JS
- 我使用的是 MVC 架构
- 我在 index.html 文件上动态渲染 HTML
我发布的代码比必要的多，因为我正在尝试练习软件架构，并且我相信我开发代码的方式存在根本性错误，这就是对话框无法工作的原因。
如果您能指出我组织代码的方式中的一些缺陷，那也会很有帮助。
HTML 文件:index.html
所有动态 HTML 都将在 <div id='app'> 上呈现default 类仅用于设置主题样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SIB Mobile</title>
<link rel="stylesheet" href="src/css/app.css">
<script type="module" defer src="src/js/app.js"></script>
</head>
<body>
<div id="app" class="default"></div>
</body>
<script src="src/pwa/idb.js"></script>
<script src="src/pwa/fetch.js"></script>
<script src="src/pwa/promise.js"></script>
</html>
app.js(主 JS 文件)
这是主要的 JS 文件，它在 _handleRoutes(routes) 上有一个 switch case 路由器。方法 (kkk)，根据 url 初始化 Controller 。
import dbConnection from '../pwa/dbConnection.js';
import homeController from './controllers/homeController.js'
import settingsController from './controllers/settingsController.js'
import downloadController from './controllers/downloadController.js';
import surveyController from './controllers/surveyController.js';
class App {
init() {
this._initWindow();
this._initServiceWorker();
this._initIndexedDB();
}
_initWindow() {
['hashchange', 'load'].forEach(ev => window.addEventListener(ev, () => {
const route = window.location.hash.slice(1);
this._handleRoutes(route);
}));
window.addEventListener('click', e => {
e.preventDefault();
if (e.target.tagName.toLowerCase() === 'a') {
const url = e.target.href.split('/');
const route = url[url.length - 1];
window.history.pushState(null, '', `#${route}`);
this._handleRoutes(route);
}
});
}
_initServiceWorker() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js')
.then(() => {
console.log('[App] Service worker registered successfully!');
})
.catch(err => console.log('[App] Faild to register sw', err));
}
}
_initIndexedDB() {
if ('indexedDB' in window) {
dbConnection.init();
}
}
_handleRoutes(route) {
switch (route) {
case "survey": surveyController.init(); break;
case "home": homeController.init(); break;
case "settings": settingsController.init(); break;
case "download": downloadController.init(); break;
default: homeController.init();
}
}
}
new App().init();
homeView.js
这是 MCV 上的 View ，负责创建要在 HTML 文件上呈现的必要标记。
我创建了一个处理程序来捕获输入文件元素上的单击事件。
它扩展了一个具有 renderPage 的 View 类方法和_parentElement属性(property)
import View from './view.js';
class HomeView extends View {
_headerTitle = 'Header Title v1.0.0';
_generateMainMarkup() {
return `
<main class="main">
<div class="container">
<input type="file" class="input"/>
</div>
</main>
`;
}
addHandlerFileUpload(handler) {
this._parentElement.addEventListener('click', e => {
const input = e.target.closest('input');
if (!input) return;
//Open file dialog
})
}
}
/*
<div class="btn-group btn-group--column">
<a href="survey" class="btn btn--primary">novo inquerito</a>
<a href="view" class="btn btn--primary">Visualizar inqueritos</a>
<a href="stats" class="btn btn--primary">Visualizar estatisticas</a>
<a href="download" class="btn btn--primary">Carregar Dados</a>
<a href="settings" class="btn btn--primary">Definicoes</a>
</div> */
export default new HomeView();
HomeController.js
这是 Controller ，它有一个 init方法和controlFileUpload方法捕获输入文件点击事件。
import view from "../views/homeView.js";
import dbConnection from '../../pwa/dbConnection.js';
class HomeController {
_data;
_controlFileUpload(input) {
// Get uploaded file here
}
init() {
view.renderPage();
view.addHandlerFileUpload(this._controlFileUpload.bind(this));
}
}
export default new HomeController();
最佳答案
我认为这是不可能的。
如果您尝试此代码，您将收到以下警告:
文件选择器对话框只能在用户激活后显示。
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const inputFile = document.querySelector('.input')
inputFile.click(); // Warning: File chooser dialog can only be shown with a user activation.
});
</script>
关于javascript - 如何用JavaScript打开动态生成<input ="file"/> HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68902161/