用户登录

通过文件选择表单,或者拖放的方式,可以把用户选择的文件复制到应用的文件系统里面。先得到选择的文件,用文件的名称去创建一个空白的文件,再调用文件的写入器,把用户选择的文件的内容再写入到在文件里。

代码

在应用的 index.html 这个文件里面,新建一个文件选择表单 .... 上面的 ID 是 select-file ...

回到 script.js ... 先得到选择文件表单元素 .... 再设置 onchange 事件处理 .. 也就是表单元素发生变化的时候要执行的动作 ...

在事件返回的对象里面,target 里面的 files 这个属性里,会包含用户选择的文件对象 .. 这部分内容我们在 文件 API 课程里做过详细的介绍,有兴趣可以去看一下 ...

这里我们命名一下选择的这个文件 ... 叫它 file ...

再用 getFile 在应用的文件系统上去创建这个文件 ...

成功以后,把文件的内容写入到这个创建的文件里面 ... 调用 fileEntry 的 createWriter 方法 ...

创建写入器成功以后,调用写入器的 write 方法 ... 要写入到文件的内容,就是用户所选择的这个文件 ...

写入成功以后,在控制台上,我们可以再输出点内容 ...

index.html

<input type="file" name="select-file" id="select-file">

script.js

/* 复制用户选择的文件到文件系统里面 */
var selectFile = document.getElementById('select-file');
selectFile.onchange = function (event) {
var file = event.target.files[0];

fileSystem.root.getFile(file.name,
{create: true, exclusive: false},
function (fileEntry) {
fileEntry.createWriter(function (fileWriter) {
fileWriter.write(file);
fileWriter.onwrite = function () { console.log('成功复制了选择的文件!'); };
}, onError);
}, onError);
};

预览

保存文件 ... 回到浏览器 ... 点击 选择文件 ... 选择在电脑上的一张图片文件 ...

这样会触发执行这个选择表单元素的 onchange 处理器 ... 也就会把所选的这张图片复制到应用的文件系统里面 ... 位置应该是在文件系统的根目录下 ....

在控制台,会显示 成功复制了选择的文件!

复制用户选择的文件到文件系统里面《 HTML5:文件系统 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点