文件上传之本地预览

最新推荐文章于 2024-06-21 16:26:04 发布

shushanfx

最新推荐文章于 2024-06-21 16:26:04 发布

阅读量589

点赞数

分类专栏： html javascript 文章标签： javascript html 文件预览

本文链接：https://blog.csdn.net/shushanfx/article/details/51883450

版权

本文主要介绍了HTML5中的File API，包括FileList、File和FileReader对象，详细阐述了如何实现文件的本地预览，包括文本文件和图片文件的预览，并探讨了文件拖拽预览的实现方法。同时提供了完整的代码示例和相关参考文献链接。

摘要由CSDN通过智能技术生成

文件上传之本地预览

标签（空格分隔）： fileupload html javascript

概述

文件上传需要使用input[type=”file”]，如下：

<input type="file" name="upload" mutipart accept="image/*">
<!--
    ** 可用属性 **
    type: file（必填），必须为file
    multipart: 指示是否可以多选
    accept : 指示文件类型，指示可选择的文件，使用逗号(,)分隔
        可能的值为：
        * 后缀，如.jpg,.png
        * 一个有效的MIME type
        * audio/* 音乐文件
        * video/* 视频文件
        * image/* 图片文件
-->

通过使用js的files属性获取一个FileList实例，FileList是一个伪数组，可以通过fileList[i]以及fileList.item(i)获取File实例。File实例包括一些文件的基本属性，通过FileReader获取文件的内容。

File API

FileList

文件列表，通过files属性获取一个FileList实例。
属性&方法

fileList.item(index)，获取指定索引的File对象。
fileList[index]，获取指定索引的File对象。
fileList.length，获取list的长度

代码参考

// fileInput是一个 HTML input 元素: <input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");
// files 是一个 FileList 对象(类似于NodeList对象)
var files = fileInput.files;
var file;
//遍历所有文件
for (var i = 0; i < files.length; i++) {
    // 取得一个文件
    file = files.item(i);
    // 这样也行
    file = files[i];
    // 取得文件名
    alert(file.name + file.size + file.type);
}

File

文件对象，使用input[type=”file”]添加的文件，每一个文件对应一个File对象，可以用过input.files[index]获取。
属性&方法

name DOMString 表示文件的名称，只读（对于早期版本的Gecko，使用fileName）
size unsigned long long 表示文件的大小，只读（对于早期版本的Gecko，使用fileSize）
type DOMString 文件的MIME类型，只读

代码样例

参见FileList

FileReader

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.
属性&方法

var reader = new FileReader()
abort()
readAsArrayBuffer(in Blob blob);
readAsBinaryString(in Blob blob);
readAsDataURL(in Blob blob);
readAsText(in Blob blob, [optional] in DOMString encoding)，在缺省的情况下，使用UTF-8编码。

error DOMError 在读取文件是发生的错误，只读
readState unsigned short 表明FileReader对象当前的状态，只读（参加状态）
result jsvar，该值根据reader调用的方法不同而不同，参数类型如下：
* readAsArrayBuffer， result对应ArrayBuffer对象；
* readAsBinaryString, result对应一个包含所读文件的原始二进制数据；
* readAsDataURL，result对应一个字符串的URL资源。
* readAsText，result对应一个字符串，其中返回字符串按照encoding编码。

状态
EMPTY 0 还没有加载任何数据
LOADING 1 数据正在被加载
DONE 2 已完成全部的数据请求

文件本地预览

下面介绍两种文件预览的方式，可以分别预览文本文件和图片文件。

文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    &

最低0.47元/天解锁文章

shushanfx

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
文件上传之本地预览

不需要上传文件至服务端即可完成文件预览功能。
复制链接

扫一扫

专栏目录