图片上传预览，html之file标签 ---FileReader_前端制作_「九州科技」值得信赖的互联网服务商

1、FileReader接口的方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

FileReader接口的方法

方法名参数描述

readAsBinaryString file 将文件读取为二进制编码

readAsText file,[encoding] 将文件读取为文本

readAsDataURL file 将文件读取为DataURL

abort (none) 终端读取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

FileReader接口的事件

事件描述

onabort 中断

onerror 出错

onloadstart 开始

onprogress 正在读取

onload 成功读取

onloadend 读取完成，无论成功失败

3 拖拽图片预览

要实现的过程如下

拖拽任意一文件，本例以图片为例。当拖拽图片到页面左侧带+号的盒子时，图片会出现在右侧的盒子里。

------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

html：

js:

var box=document.getElementById("box");

var box2=document.getElementById("box2");

box.οndragοver=function(e)

{ e=e||window.event

e.preventDefault();

this.style.background="#ddd"

}

box.οndrοp=function(e)

{ e.preventDefault();

this.style.background="#fff"

var files=e.dataTransfer.files; //通过event时间对象的dataTransfer属性来获取所有的文件列表

for(var i=0;i<files.length;i++)

{

if(files[i].type.indexOf("image")!=-1) //判断文件类型是否为图片

{

var fReader=new FileReader();

fReader.readAsDataURL(files[i]);

fReader.οnlοad=function()

{

var img=document.createElement("img");

img.src=this.result;

box2.appendChild(img)

}

}else

{ alert("无法获取信息，您拖入的不是图片文件")

}

重点： var files=e.dataTransfer.files; //通过event时间对象的dataTransfer属性来获取所有的文件列表

实例2：上传图片并且本地预览图片（表单file操作）

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

js部分：

var flObj=document.getElementById("file")

var btn=document.getElementById("btn");

btn.οnclick=function()

{

var file=flObj.files[0]; //因为每次只上传了一张图片，所以获取到flObj.files[0];

var fReader=new FileReader();

fReader.readAsDataURL(file)

fReader.οnlοad=function(e)

{

document.getElementById("img").src= this.result

}

效果

初始情况下

点击选择文件按钮。再点击上传按钮后

实例3：拖拽任意类型文件，ajax上传到服务器端

html代码：

</form>

js代码

var box=document.getElementById("box");

box.οndragοver=function(e)

{

e.preventDefault();

this.style.background="#eee"

}

box.οndragleave=function(e)

{

e.preventDefault();

this.style.background="#fff"

}

box.οndrοp=function(e)

{

e.preventDefault();

//拖拽一个文件上传

var file= e.dataTransfer.files[0]; //在拖拽时，通过event对象的dataTransfer对象下的files属性来获取当前对象

var newform=new FormData(); //定义一个FormData对象

newform.append("aa",file); //通过其apped方法把拖拽的对象发送至服务器端aa是一个名称。用于服务器端读取，file是获取到的对象（key，value）

var xml=new XMLHttpRequest();

xml.open("post","upload.php",false);

xml.send(newform);

}

php部分

if($_FILES["file"]["tmp_name"])

{

move_uploaded_file($_FILES["file"]["tmp_name"],$_FILES["file"]["name"]); //注意结尾的分号

}

上一篇：网站进行优化时确立一个核心标题是多么重要呢？

下一篇：html5网站建设响应式网站建设的趋势分析

图片上传预览，html之file标签 ---FileReader

首页

关于

服务

案例

资讯

联系