FileReader上传文件

最新推荐文章于 2024-04-26 10:22:03 发布
最新推荐文章于 2024-04-26 10:22:03 发布
阅读量797 收藏
点赞数 1
原文链接：http://www.cnblogs.com/peiyanh/p/9565406.html
版权

　　FileReader对象允许web应用程序异步读取存储在计算机上的文件的内容，使用File或Bolb对象指定要读取的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象，也可以是来自拖放操作生成的DataTransfer对象，还可以是来自在一个HTMLCanvasElement上执行的mozGetAsFile()方法后返回结果。

属性

　　FileReader.error

　　在读取文件时发生错误

　　FileReader.readyState

常量名值描述
EMPTY0还没有加载任何数据
LOADING1数据正在被加载
DONE2已完成全部的读取请求

　　FileReader.result

　　该属性仅在读取操作完成后才有效，数据格式取决于使用哪种方式来进行读取操作。返回文件内容。

事件处理

　　FileReader.onabort

　　处理abort事件，该事件在读取操作被中断时触发。

　　FileReader.onerror

　　处理error事件，该事件在读取发生错误时触发。

　　FileReader.onload

　　处理load事件，该事件在读取操作完成时触发。

　　FileReader.onloadstart

　　处理loadstart事件，该事件在读取操作开始时触发。

　　FileReader.onloadend

　　处理loadend事件，该事件在读取操作结束时触发（要么成功，要么失败）。

　　FileReader,onprogress

　　处理progress事件，在读取Bolb时触发。

方法

　　FileReader.abort()

　　中止读取操作，在返回时，readyState的属性为DONE

　　FileReader.readAsArrayBuffer()

　　开始读取指定的Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer数据对象.

　　FileReader.readAsBinaryString()

　　开始读取指定的Blob中的内容, 一旦完成, result 属性中将包含所读取文件的原始二进制数据。

　　FileReader.readAsDataURL()

　　开始读取指定的Blob中的内容, 一旦完成, result 属性中将包含一个data：URL格式的字符串以表示所读取的文件内容。

　　FileReader.readAsText()

　　开始读取指定的Blob中的内容, 一旦完成, result 属性中将包含一个字符串以表示所读取的文件内容。

 文件上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
        <input type="text" name="name" value="1234">
        <input type="text" name="pwd" value="5678">
        <input type="file" name="file" id="file" onchange="change()">
        <input type="button" value="提交" onclick="submit()">
    
        <img width="300" id="img" alt="">
    <script>
        
        var fileInp = document.getElementById('file');
        var reader = new FileReader();
        var img = document.getElementById('img');
        function change(){
            var file = fileInp.files[0];
            if(file.size > 0){
                reader.readAsDataURL(file);
            }
        }
        reader.onload = function(){
            img.src = reader.result;
        }
        function submit(){
            var http = new XMLHttpRequest();
            http.open('POST', '/file', true);
            http.onload = function(res) {
                console.log(res)
            };
            http.send()
        }
    </script>
</body>
</html>
View Code

 

转载于:https://www.cnblogs.com/peiyanh/p/9565406.html

weixin_30861459
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FileReader详解
Enl0ve的博客
11-06 4020
FileReader详解 FileReader API提供了大量的方法来读取File对象或Blob对象，并且这些方法都是异步的。这意味着当程序读取文件时并不会发生阻塞，使用这些方法读取大文件将更加有用。 简单地说，FileReader对象可以异步读取存储在开发者的计算机磁盘上的数据内容，可以使用File对象或Blob对象来指定所要处理的文件或数据。File对象提供了三种方式来读取文件，第一种文件是...
FileReader读取文件
费小存的博客
11-16 1171
H5 file function readfile(f){ var reader = new FileReader(); reader.readAsText(f,'GB2312');//读取文件 reader.onload = function(){ var text = reader.result;
FileReader
m0_46641774的博客
09-20 1万+
FileReader
HTML5之FileReader的使用
热门推荐
骆昊的技术专栏
05-23 14万+
HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法： 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr =
使用 FileReader进行文件读取
zyf971020的博客
11-03 7697
使用 FileReader进行文件读取
JS: FileReader()读取文件
懒虫的博客
11-09 2万+
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。 属性： FileReader.error 表示在读取文件时发生的错误 FileReader.readyState FilerReader.result 读取到的结果 下面开始实际例子 index.html如下 <!DOCTYPE html> <html lang="zh"> <head> <met
JS+HTML5 FileReader实现文件上传前本地预览功能
12-10
HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并...
JavaScript html5利用FileReader实现上传功能
10-20
主要为大家详细介绍了JavaScript html5利用FileReader实现上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
上传文件AJAX
05-15
在现代Web开发中，"上传文件AJAX"是一项至关重要的技术，它允许用户在不刷新整个页面的情况下，通过异步方式上传文件。这种方式极大地提升了用户体验，因为它使得网页交互更加流畅和快速。AJAX（Asynchronous ...
JavaScript使用FileReader实现图片上传预览效果
10-19
总的来说，使用JavaScript和FileReader API实现图片上传预览是一个实用且常见的功能，它使得用户在上传文件之前就能看到即将上传的图片，提高了网站或应用的用户体验。通过掌握这一技术，开发者可以创建更加动态和...
Js的FileReader相关操作
qq_60440599的博客
02-07 1711
Js的FileReader相关介绍
【JS】前端文件读取FileReader操作总结
最新发布
yqdid的博客
04-26 3679
开发中经常遇到文件上传的场景，有时需要前端将文件内容读取出来再以base64格式传到接口
python保存data到txt_【python】读取和输出到txt
weixin_39661345的博客
11-23 1626
读取txt的数据和把数据保存到txt中是经常要用到的，下面我就总结一下。读txt文件python常用的读取文件函数有三种read()、readline()、readlines()以读取上述txt为例，我们一起来看一下三者的区别read() 一次性读全部内容read() #一次性读取文本中全部的内容，以字符串的形式返回结果with open("test.txt", "r") as f: #...
Js的FileReader读取文件内容（async/await）
ljp654的博客
04-13 5811
filereader和async/await花式使用
FileReader简介
曹定栓的博客
06-13 2万+
FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。
Java基础学习——Java流（二）FileReader和FileWriter、FileInputStream和FileOutputStream
skx1102195517的博客
12-12 2593
一、
JavaScript系列之FileReader
老__L的博客
10-30 4071
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。FileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。
【IO流系列】FileReader 字符输入流
kuxiaoyang的博客
02-27 950
`FileReader `是 Java 中的字符输入流，用于从文件中读取字符数据。它继承自 `InputStreamReader `类，实现了 `Closeable` 接口。`FileReader `主要用于读取文本文件的内容，一次读取一个字符或者一个字符数组。
filereader读取文件
08-07
### 回答1： 使用 FileReader 可以读取文本文件的内容。下面是一个简单的例子： ```javascript let fileInput = document.getElementById('fileInput'); let contentDiv = document.getElementById('fileContent'); fileInput.addEventListener('change', (event) => { let file = event.target.files[0]; let reader = new FileReader(); reader.readAsText(file); reader.onload = (event) => { contentDiv.textContent = event.target.result; }; }); ``` 上面的代码中，我们首先获取到一个 `<input type="file">` 元素和一个显示文件内容的 `<div>` 元素。然后给 `<input>` 元素添加了一个 `change` 事件监听器，当用户选择了文件后就会触发这个事件。在事件处理函数中，我们获取到用户选择的文件，创建一个 FileReader 对象，并调用 `readAsText()` 方法读取文件内容。当读取完成时，会触发 `onload` 事件，我们可以在这个事件处理函数中获取到文件内容，并将其显示在页面上。 ### 回答2： FileReader 是 JavaScript 中的一个对象，用于从文件中读取数据。 使用 FileReader 可以读取多种类型的文件，例如文本文件、图像文件、音频文件等。 读取文件的过程是异步的，即读取文件的同时可以进行其他的操作。 使用 FileReader 的基本步骤如下： 1. 创建 FileReader 对象： ```javascript var reader = new FileReader(); ``` 2. 绑定事件处理程序（可选）： ```javascript reader.onload = function(event) { // 读取完成后的处理逻辑 }; ``` 3. 读取文件内容： ```javascript reader.readAsText(file); ``` 这里的 `file` 是一个文件对象，可以通过 `<input type="file">` 元素的 `files` 属性或 `FileList` 对象获取。 4. 读取完成后的处理逻辑（如果绑定了事件处理程序）： ```javascript function(event) { var content = event.target.result; // 处理文件内容 } ``` 在此事件处理程序中，我们可以通过 `event.target.result` 获取到读取的文件内容。 需要注意的是，使用 FileReader 读取文件时存在一些限制。首先，由于安全原因，不允许直接读取用户计算机上的文件。在浏览器中，只能通过用户主动选择文件并上传触发读取操作。此外，浏览器对于不同类型的文件可能有限制，例如不允许读取某些特定类型的文件。 总之，FileReader 是一个用于读取文件内容的 JavaScript 对象，在前端开发中可以用于实现文件上传、预览和编辑等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值