作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
Flutter Web仍处于技术预览中,但我想从磁盘中选择一个图像并将其上传到服务器。无论如何,有没有将HTML,JS添加到我的Flutter网站项目中并与之交互?
最佳答案
您需要addEventListener,还需要附加它以便在移动Safari中将其唤醒。我回答了here too。
Future<void> _setImage() async {
final completer = Completer<List<String>>();
InputElement uploadInput = FileUploadInputElement();
uploadInput.multiple = true;
uploadInput.accept = 'image/*';
uploadInput.click();
// onChange doesn't work on mobile safari
uploadInput.addEventListener('change', (e) async {
// read file content as dataURL
final files = uploadInput.files;
Iterable<Future<String>> resultsFutures = files.map((file) {
final reader = FileReader();
reader.readAsDataUrl(file);
reader.onError.listen((error) => completer.completeError(error));
return reader.onLoad.first.then((_) => reader.result as String);
});
final results = await Future.wait(resultsFutures);
completer.complete(results);
});
// need to append on mobile safari
document.body.append(uploadInput);
final List<String> images = await completer.future;
setState(() {
_uploadedImages = images;
});
uploadInput.remove();
}
Future<void> _setImage() async {
final completer = Completer<List<String>>();
final InputElement input = document.createElement('input');
input
..type = 'file'
..multiple = true
..accept = 'image/*';
input.click();
// onChange doesn't work on mobile safari
input.addEventListener('change', (e) async {
final List<File> files = input.files;
Iterable<Future<String>> resultsFutures = files.map((file) {
final reader = FileReader();
reader.readAsDataUrl(file);
reader.onError.listen((error) => completer.completeError(error));
return reader.onLoad.first.then((_) => reader.result as String);
});
final results = await Future.wait(resultsFutures);
completer.complete(results);
});
// need to append on mobile safari
document.body.append(input);
// input.click(); can be here
final List<String> images = await completer.future;
setState(() {
_uploadedImages = images;
});
input.remove();
}
关于flutter - 在Flutter网站中上传图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57063359/
我有以下正则表达式 /[a-zA-Z0-9_-]/ 当字符串只包含从 a 到z 大小写、数字、_ 和 -。 我的代码有什么问题? 能否请您向我提供一个简短的解释和有关如何修复它的代码示例? //var
我是一名优秀的程序员,十分优秀!