Когда я нажимаю на вход для загрузки фотографии на веб-сайте во Flutter WebView, я хочу выбрать и загрузить фотографию с телефона. Я не знаю, как решить эту проблему. Вы можете помочь?
Коды сайта следующие:
<div class = "foto-upload">
<label class = "foto-buton">
<input type = "file" name = "resim" multiple = "multiple" id = "fileupload">
<i class = "fa fa-upload"></i>
<span>FOTOĞRAF EKLE</span>
<b>YA DA SÜRÜKLE BIRAK</b>
</label>
<input type = "hidden" name = "thumb_id" id = "thumb_id" value = "">
<div class = "foto-list">
<div class = "foto-count">EKLEDİĞİNİZ FOTOĞRAF ADEDİ:
<span id = "mediaCount" data-total = "0">0/10</span>
<span id = "mediaStatus"></span>
<span id = "filePercent"></span>
</div>
<ul>
<li><i class = "fa fa-image"></i></li>
<li><i class = "fa fa-image"></i></li>
<li><i class = "fa fa-image"></i></li>
<li><i class = "fa fa-image"></i></li>
<li><i class = "fa fa-image"></i></li>
<li><i class = "fa fa-image"></i></li>
<li><i class = "fa fa-image"></i></li>
<li><i class = "fa fa-image"></i></li>
<li><i class = "fa fa-image"></i></li>
<li><i class = "fa fa-image"></i></li>
</ul>
</div>
<div class = "clear"></div>
</div>
Ниже приведены коды Flutter/Dart:
WebView(
initialUrl: '***',
onWebViewCreated: (webViewController) {
widget._controllerCompleter.future
.then((value) => widget._controller = value);
widget._controllerCompleter.complete(webViewController);
},
onPageStarted: (url) {
setState(() {
loadingPercentage = 0;
});
},
onProgress: (progress) {
setState(() {
loadingPercentage = progress;
});
},
onPageFinished: (url) {
setState(() {
loadingPercentage = 100;
});
},
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: _createJavascriptChannels(context),
),
Вы можете использовать плагин flutter_inappwebview (я автор) для обработки загрузки файлов или прямой съемки фото/видео с помощью чего-то вроде <input type = "file" accept = "image/*" capture>
.
Чтобы иметь возможность управлять загрузкой файлов, вам потребуется дополнительная настройка для Android и iOS. Ознакомьтесь с официальной онлайн-документацией Включить камеру для ввода HTML!
Вот пример использования последней версии плагина 6 (6.0.0-beta.18):
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:permission_handler/permission_handler.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
if (!kIsWeb &&
kDebugMode &&
defaultTargetPlatform == TargetPlatform.android) {
await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);
}
await Permission.camera.request();
await Permission.microphone.request(); // if you need microphone permission
runApp(const MaterialApp(home: MyApp()));
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final GlobalKey webViewKey = GlobalKey();
InAppWebViewController? webViewController;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("InAppWebView test"),
),
body: Column(children: <Widget>[
Expanded(
child: InAppWebView(
key: webViewKey,
initialData: InAppWebViewInitialData(data: """
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
</head>
<body>
<label for = "avatar">Choose photos:</label>
<input type = "file" name = "resim" multiple = "multiple" id = "fileupload">
<br />
<br />
<label for = "avatar">Take a photo:</label>
<input type = "file" accept = "image/*" capture>
</body>
</html>
"""),
onWebViewCreated: (controller) {
webViewController = controller;
},
),
),
]));
}
}
Попробуйте объявить свой
input
лайком:<input id = "photo" type = "file" accept = "image/*" capture</input>