全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:18071077883

图片上传预览,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:
 
<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"]); //注意结尾的分号
 
}
 
 
 ———————————————— 
版权声明:本文为CSDN博主「sleeppingforg」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/baidu_41601048/article/details/78997497

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。