摘要：客户端直接访问用户计算机的文件以前在表单添加了字段是为給开发提供安全的方式以便在客户端更好访问用户的文件字段的基础上加了一些直接访问文件信息的接口集合与类型读取文件的数据集合本地文件的名称文件的字节大小字符文件的类型文件上次修改的时间实现
file API
客户端直接访问用户计算机的文件,2000以前,在表单添加了字段. file API是为給web开发提供安全的方式,以便在客户端更好访问用户的文件,字段的基础上加 了一些直接访问文件信息的接口-files集合.与fileReader类型读取文件的数据.files集合
name: 本地文件的名称 size: 文件的字节大小 type: 字符、文件的MIME类型 lastModifiedDate: 文件上次修改的时间(chrome实现了这属性)fileReader类型
readAsText(file, encoding): 以纯文本的方式读取文件.
readAsDataURL(file): 读取文件并以URL的形式保存在result属性中.
readAsBinaryString(file): 读取文件并将一个字符串将保存在result属性中,一个字符
为一个字节.
readAsArrayBuffer(file): 读取文件并将一个包含文件内容的ArrayBuffer保存在
result属性中.
(file-文件集合; encoding-编码类型)
事件
由于数据是异步读取.因此fileReader提供了几种事件.
progress事件: 每～50ms,便触发一次.
error事件: 但文件无法读取就会触发,有个属性error.code属性.1表示未找到文件,2表示
安全性错误,3表示读取中断,4表示文件不可读,5表示编码错误.
load事件: 触发但文件完整读取后.
中断了还会触发abort事件,在load、error事件后还会触发loadend事件.
栗子
当用户上传完图片之后,可在页面立即显示.
//html
//js
function showFileImg(ele, dist){
const filesList = document.querySelector(ele);
const output = document.querySelector(dist);
filesList.addEventListener("change", function(event) {
//实例fileReader对象
const reader = new FileReader();
//获取文件集合
let files = event.target.files[0];
if(/image/.test(files.type)){
//读取文件并通过URL类保存在result里
reader.readAsDataURL(files);
//事件
reader.onload = function(){
//获得图片数据并插进显示节点
let html = ""
i++;
}
output.innerHTML = info;
}
}
droptarget.addEventListener("dragenter", handleEvent);
droptarget.addEventListener("dragover", handleEvent);
droptarget.addEventListener("drop", handleEvent);
}
dropFile();
使用XHR上传文件
//html
//js
function xhrFile(){
const file = document.querySelector("#file");
const sendFile = document.querySelector("#sendFile");
//文件信息
let files;
//获得文件信息
function getFileInfo(event){
let files = event.target.files[0];
};
//发送xhr
function sendFileXhr(event){
//实例对象
let data = new FormData();
let i = 0;
let len = files.length;
//遍历文件信息
while(i < len){
data.append("file" + i, files[i]);
i++;
}
//实例请求对象
let xhr = new XMLHttpRequest();
xhr.open("post", "......php", true);
//请求成功打印放回信息
xhr.onreadystatechange = function() {
if(xhr.readystate === 4){
alert(xhr.responseText);
}
}
xhr.send(data);
};
}
xhrFiles()
对象formData可通过键值模拟一系列的表单,通过xhr的send提交数据.
formdata appendnew FormData(form? : HTMLFormElement);
给这对象加键值
append(name, value, filename);
name: 字段名称
value: 字段数值
filename: 文件的文件名(可选).
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50762.html
摘要：客户端直接访问用户计算机的文件以前在表单添加了字段是为給开发提供安全的方式以便在客户端更好访问用户的文件字段的基础上加了一些直接访问文件信息的接口集合与类型读取文件的数据集合本地文件的名称文件的字节大小字符文件的类型文件上次修改的时间实现 file API 客户端直接访问用户计算机的文件,2000以前,在表单添加了字段. file API是为給web开发提供安全的方式,以便...
摘要：你可以通过在应用程序上下文中添加一个解析器来启用的处理。当的检测到一个请求时，它会激活你声明好的解析器，然后把这个解析器转交给请求。解析器会把当前的扭曲为一个支持文件上传的。首先，创建一个带有的表单，这样用户就可以通过这个表单上传文件了。 最近家里的网出现了莫名其妙的问题，连不上码云了，所以把示例迁到了 github 上。本示例见这个项目的 master 分支的 ZestMulti...
摘要：在做时，不可避免地要上传一些文件，最常用到的就是图片。提供电子邮件服务的站点，除了图片还需要上传文档等其他类型文件的功能。当点击所看到的按钮时，实际点击的是原生上传控件，这样一来就触发了浏览器默认行为，即打开选择文件对话框。 在做 Web App 时，不可避免地要上传一些文件，最常用到的就是图片。在线相册及图片收藏网站等以提供图片存储服务的站点自不用说，社交网络的头像、发布信息等都需要...
阅读 3645·2021-11-24 09:39
阅读 3193·2019-08-30 15:56
阅读 1348·2019-08-30 15:55
阅读 940·2019-08-30 15:53
阅读 1809·2019-08-29 18:37
阅读 3516·2019-08-29 18:32
阅读 3046·2019-08-29 16:30
阅读 2790·2019-08-29 15:14
