如何选择文件 [英] How to get the file selected
问题描述
我正在使用旧版本构建颤动网络.我有一个FileUploadInputElement.我需要从该元素中选择文件.
I am building a flutter web using old version. I am having a FileUploadInputElement. I need to get the file selected from that element.
@override
Widget build(BuildContext context) {
FileUploadInputElement fileUploadInputElement = FileUploadInputElement();
ui.platformViewRegistry.registerViewFactory(
'animation-Image-html', (int viewId) => fileUploadInputElement);
return SizedBox(
child: HtmlElementView(
viewType: 'animation-Image-html',
),
);
}
推荐答案
您可以直接使用element.files
属性访问文件并使用 FileReader示例.
You can directly use the element.files
property to access the files and use the Filreader class from dart:html
. I have created an example below to show you how a text file and image can be read. This example is based on FileReader examples in another post.
访问文件
element
是FileUploadInputElement
参考.
element.files[0]
或多个文件element.files
设置文件阅读器
String option1Text = "Initialized text option1";
Uint8List uploadedImage;
FileUploadInputElement element = FileUploadInputElement()..id = "file_input";
// setup File Reader
FileReader fileReader = FileReader();
使用FileReader读取文件
fileReader.readAsText(element.files[0])
为加载事件连接侦听器
fileReader.onLoad.listen((data) {
setState(() {
option1Text = fileReader.result;
});
});
连接错误事件
fileReader.onError.listen((fileEvent) {
setState(() {
option1Text = "Some Error occured while reading the file";
});
});
使用Image.memory
显示字节数组中的图像.
Use Image.memory
to show images from byte array.
Image.memory(uploadedImage)
注意:在以下示例中,我们选择一个文件,然后单击相应的按钮以处理文件读取.但是,可以通过以类似方法在
FileUploadInputElement
元素的各个事件中连接逻辑来实现相同目的.例如:element.onLoad.listen
或element.onError.listen
事件流.
Note: In the following example we choose a file and click the respective button to handle the file reading. But the same can be achieved by connecting the logic in respective events of the
FileUploadInputElement
element in a similar approach. eg:element.onLoad.listen
orelement.onError.listen
event streams.
完整示例
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:html';
class FileUploadTester extends StatefulWidget {
@override
_FileUploadTesterState createState() => _FileUploadTesterState();
}
class _FileUploadTesterState extends State<FileUploadTester> {
String option1Text = "Initialized text option1";
Uint8List uploadedImage;
FileUploadInputElement element = FileUploadInputElement()..id = "file_input";
// setup File Reader
FileReader fileReader = FileReader();
// reader.onerror = (evt) => print("error ${reader.error.code}");
@override
Widget build(BuildContext context) {
ui.platformViewRegistry.registerViewFactory("add_input", (int viewId) {
return element;
});
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
FlatButton(
color: Colors.indigoAccent,
child: Text('ReadFile'),
onPressed: () {
fileReader.onLoad.listen((data) {
setState(() {
option1Text = fileReader.result;
});
});
fileReader.onError.listen((fileEvent) {
setState(() {
option1Text = "Some Error occured while reading the file";
});
});
fileReader.readAsText(element.files[0]);
},
),
Expanded(
child: Container(
child: Text(option1Text),
),
),
Expanded(child: HtmlElementView(viewType: 'add_input')),
Expanded(
child: uploadedImage == null
? Container(
child: Text('Uploaded image should shwo here.'),
)
: Container(
child: Image.memory(uploadedImage),
),
),
FlatButton(
child: Text('Show Image'),
color: Colors.tealAccent,
onPressed: () {
fileReader.onLoad.listen((data) {
setState(() {
uploadedImage = fileReader.result;
});
});
fileReader.onError.listen((fileEvent) {
setState(() {
option1Text = "Some Error occured while reading the file";
});
});
fileReader.readAsArrayBuffer(element.files[0]);
},
),
],
);
}
}
以下
这篇关于如何选择文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!