用来把文件读入内存, 并且读取文件中的数据. FileReader 接口提供了一个异步 API, 使用该 API 可以在浏览器主线程中异步访问文件系统, 读取文件中的数据. 到目前文职, 只有 FF3.6 + 和 Chrome6.0 + 实现了 FileReader 接口.
1,FileReader 接口的方法
FileReader 接口有 4 个方法, 其中 3 个用来读取文件, 另一个用来中断读取. 无论读取成功或失败, 方法并不会返回读取结果, 这一结果存储在 result 属性中.
2,FileReader 接口事件
FileReader 接口包含了一套完整的事件模型, 用于捕获读取文件时的状态.
3,FileReader 接口的使用
- <script type="text/javascript">
- var result=document.getElementById("result");
- var file=document.getElementById("file");
- // 判断浏览器是否支持 FileReader 接口
- if(typeof FileReader == 'undefined'){
- result.Innerhtml="<p > 你的浏览器不支持 FileReader 接口!</p>";
- // 使选择控件不可操作
- file.setAttribute("disabled","disabled");
- }
- function readAsDataURL(){
- // 检验是否为图像文件
- var file = document.getElementById("file").files[0];
- if(!/image/w+/.test(file.type)){
- alert("看清楚, 这个需要图片!");
- return false;
- }
- var reader = new FileReader();
- // 将文件以 Data URL 形式读入页面
- reader.readAsDataURL(file);
- reader.onload=function(e){
- var result=document.getElementById("result");
- // 显示文件
- result.innerHTML='<img src="' + this.result +'"alt="" />';
- }
- }
- function readAsBinaryString(){
- var file = document.getElementById("file").files[0];
- var reader = new FileReader();
- // 将文件以二进制形式读入页面
- reader.readAsBinaryString(file);
- reader.onload=function(f){
- var result=document.getElementById("result");
- // 显示文件
- result.innerHTML=this.result;
- }
- }
- function readAsText(){
- var file = document.getElementById("file").files[0];
- var reader = new FileReader();
- // 将文件以文本形式读入页面
- reader.readAsText(file);
- reader.onload=function(f){
- var result=document.getElementById("result");
- // 显示文件
- result.innerHTML=this.result;
- }
- }
- </script>
- <p>
- <label > 请选择一个文件:</label>
- <input type="file" id="file" />
- <input type="button" value="读取图像" onclick="readAsDataURL()" />
- <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
- <input type="button" value="读取文本文件" onclick="readAsText()" />
- </p>
- <div id="result" name="result"></div>
最后总结下 HTML5 实现拖拽上传的技术要点:
1, 监听拖拽: 监听页面元素的拖拽事件, 包括: dragenter,dragover,dragleave 和 drop, 一定要将 dragover 的默认事件取消掉, 不然无法触发 drop 事件. 如需拖拽页面里的元素, 需要给其添加属性 draggable="true";
2, 获取拖拽文件: 在 drop 事件触发后通过 e.dataTransfer.files 获取拖拽文件列表,.length 属性获取文件数量,.type 属性获取文件类型.
3, 读取图片数据并添加预览图.
4, 发送图片数据: 使用 FormData 模拟表单数据 AJAX 提交文件流.
简单的图片拖拽上传 (没有对接 php 数据):
代码片段 1
- <!DOCTYPE HTML>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/CSS">
- .demo{width:500px; margin:50px auto}
- #drop_area{width:100%; height:100px; border:3px dashed silver; line-height:100px; text-align:center; font-size:36px; color:#d3d3d3}
- #preview{width:500px; overflow:hidden}
- </style>
- </head>
- <body>
- <div class="demo">
- <div id="drop_area"> 将图片拖拽到此区域 </div>
- <div id="preview"></div>
- </div>
- <script type="text/javascript">
- function $$(id){
- return (!id) ? null : document.getElementById(id);
- }
- // 脱离
- function dragleave(e){
- e.preventDefault();
- }
- // 拖后放
- function drop(e){
- e.preventDefault();
- }
- // 拖进
- function dragenter(e){
- e.preventDefault();
- }
- // 拖来拖去
- function dragover(e){
- e.preventDefault();
- }
- document.addEventListener('dragleave',dragleave,false);
- document.addEventListener('drop',drop,false);
- document.addEventListener('dragenter',dragenter,false);
- document.addEventListener('dragover',dragover,false);
- //HTML5 的文件 API 有一个 FileList 接口, 它可以通过 e.dataTransfer.files 拖拽事件传递的文件信息, 获取本地文件列表信息.
- //var fileList=e.dataTransfer.files;
- // 使用 files 方法将会获取到拖拽文件的数组形势的数据, 每个文件占用一个数组索引, 如果该索引不存在文件数据, 将返回 null 值. 可以通过 length 属性获取文件数量.
- //var fileNum=fileList.length;
- // 用 js 监听 drop 事件, 首先要判断拖入的文件是否符合要求, 包括图片类型, 大小等, 然后获取本地图片信息, 实现预览最后上传.
- var box=$$('drop_area'),
- preview=$$('preview');
- box.addEventListener('drop',function(e){
- e.preventDefault();
- // 获取文件对象
- var fileList = e.dataTransfer.files;
- // 检测是否是拖拽文件到页面的操作, 即是否有文件上传
- if(fileList.length == 0){
- return false;
- }
- if(fileList[0].type.indexOf('image') === -1){
- alert("您拖的不是图片");
- return false;
- }
- // 拖拽图片到浏览器, 可以实现预览功能
- var img=window.webkitURL.createObjectURL(fileList[0]);
- var filename=fileList[0].name; // 图片名称
- var filesize=Math.floor((fileList[0].size/1024));
- if(filesize>1024){
- alert("上传大小不能超过 1M");
- return false;
- }
- var str="<img src="+img+"><p > 图片名称:"+filename+"</p></p > 大小:"+filesize+"KB</p>";
- preview.innerHTML=str;
- // 上传
- xhr = new XMLHttpRequest();
- xhr.open("post","upload.php",true);
- xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");
- var fd=new FormData();
- fd.append("mypic",fileList[0]);
- xhr.send(fd);
- },false)
- </script>
- </body>
- </html>
- <!DOCTYPE HTML>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- .demo{width:500px; margin:50px auto}
- drop_area{width:100%; height:100px; border:3px dashed silver; line-height:100px; text-align:center; font-size:36px; color:#d3d3d3}
- #preview{width:500px; overflow:hidden}
- </style>
- </head>
- <body>
- <div class="demo">
- <div id="drop_area"> 将图片拖拽到此区域 </div>
- <div id="preview"></div>
- </div>
- <script type="text/javascript">
- function $$(id){
- return (!id) ? null : document.getElementById(id);
- }
- // 脱离
- function dragleave(e){
- e.preventDefault();
- }
- // 拖后放
- function drop(e){
- e.preventDefault();
- }
- // 拖进
- function dragenter(e){
- e.preventDefault();
- }
- // 拖来拖去
- function dragover(e){
- e.preventDefault();
- }
- document.addEventListener('dragleave',dragleave,false);
- document.addEventListener('drop',drop,false);
- document.addEventListener('dragenter',dragenter,false);
- document.addEventListener('dragover',dragover,false);
- //HTML5 的文件 API 有一个 FileList 接口, 它可以通过 e.dataTransfer.files 拖拽事件传递的文件信息, 获取本地文件列表信息.
- //var fileList=e.dataTransfer.files;
- // 使用 files 方法将会获取到拖拽文件的数组形势的数据, 每个文件占用一个数组索引, 如果该索引不存在文件数据, 将返回 null 值. 可以通过 length 属性获取文件数量.
- //var fileNum=fileList.length;
- // 用 js 监听 drop 事件, 首先要判断拖入的文件是否符合要求, 包括图片类型, 大小等, 然后获取本地图片信息, 实现预览最后上传.
- var box=$$('drop_area'),
- preview=$$('preview');
- box.addEventListener('drop',function(e){
- e.preventDefault();
- // 获取文件对象
- var fileList = e.dataTransfer.files;
- // 检测是否是拖拽文件到页面的操作, 即是否有文件上传
- if(fileList.length == 0){
- return false;
- }
- if(fileList[0].type.indexOf('image') === -1){
- alert("您拖的不是图片");
- return false;
- }
- // 拖拽图片到浏览器, 可以实现预览功能
- var img=window.webkitURL.createObjectURL(fileList[0]);
- var filename=fileList[0].name; // 图片名称
- var filesize=Math.floor((fileList[0].size/1024));
- if(filesize>1024){
- alert("上传大小不能超过 1M");
- return false;
- }
- var str="<img src="+img+"><p > 图片名称:"+filename+"</p></p > 大小:"+filesize+"KB</p>";
- preview.innerHTML=str;
- // 上传
- xhr = new XMLHttpRequest();
- xhr.open("post","upload.php",true);
- xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");
- var fd=new FormData();
- fd.append("mypic",fileList[0]);
- xhr.send(fd);
- },false)
- </script>
- </body>
- </html>[/code]
后台 php 数据, 要匹配图片存储文件夹, 不然会报错:
- <?php
- // 这里的字符串就是前台 formdata.append 的时候用的 key 获得的是文件数组
- $mypic = $_FILES["mypic"];
- if(!empty($mypic)){
- $picname = $_FILES['mypic']['name'];
- $picsize = $_FILES['mypic']['size'];
- if ($picsize> 512000) {
- echo '图片大小不能超过 500k';
- exit;
- }
- $type = strstr($picname, '.');
- if ($type != ".gif" && $type != ".jpg") {
- echo '图片格式不对!';
- exit;
- }
- // 这里把图片存储的名字改一下就可以存储多张
- $pics = 'helloweba' . $type;
- // 上传路径
- $pic_path = "pics/". $pics;
- // 最后利用 php move_uploaded_file() 函数把临时文件放到指定位置
- move_uploaded_file($mypic["tmp_name"],$pic_path);
- }
- ?>
来源: http://www.qdfuns.com/article/13737/236e2a2cf676716deddc0f81f2aa27b4.html