导航

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

发布时间:2020/1/11 17:56:34 来源:「九州科技」值得信赖的互联网服务商
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:
 
<div id="box">+</div>
 
<div id="box2"></div>
 
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>
 
<html lang="en">
 
<head>
 
<meta charset="UTF-8">
 
<title>Document</title>
 
</head>
 
<body>
 
     <input type="file" name="file" id="file"></br>
 
      <input type="button" name="btn" value="读取图像" id="btn">
 
      <div id="picBox"><img src="" width="300" height="530" id="img"/></div>
 
</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  action="fileup.php" method="post" enctype="multipart/form-data">
 
<label  for="file"> 文件名:</label>
 
<input type="file" name="file" id="file"></input><br/>
 
<input type="submit" name="submit" value="提交"></input>
 
 </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"]); //注意结尾的分号
 
}
最新资讯
相关推荐
服务项目
微信客服
180-7107-7883
武汉市江汉区建设大道568号新世界国贸大厦I座36楼B区
E-mail:125435440@QQ.com
备案号:鄂ICP备13002765号-6    鄂公网安备 42010202000700号    网站地图
九州科技,您身边的互联网应用方案提供商-高端网站建设-网站制作-网站开发-网页设计-微信开发-小程序开发
企业网站建设 公众号开发 小程序制作 网站seo排名优化 H5活动营销 互联网药品信息服务许可证

18071077883

提交需求