>

加载进程,样式美化及贯彻图片预览

- 编辑:www.bifa688.com -

加载进程,样式美化及贯彻图片预览

前言

  上传图片是常见的需求,多使用input标签。本文主要介绍 input标签的样式美化 和 实现图片预览

  用到的知识点有:

    1、input标签的使用

    2、filelist对象 和 file对象

    3、fileReader对象

前言

  上传图片是常见的需求,多使用input标签。本文主要介绍 input标签的样式美化 和 实现图片预览

  用到的知识点有:

    1、input标签的使用

    2、filelist对象 和 file对象

    3、fileReader对象

最近有几个问题一直被提及,就是图片上传这一块,虽然之前也说过,今天对这部分内容进行一个归纳和整理.

样式美化

  原生的input标签样式单一,且在不同浏览器下的表现还不一致。所以为了美观和统一,我们需要自定义input标签的样式。

  实现的方式有很多中,这里采用的是:用一个div将input标签包裹,然后再将input标签透明度设置为0,再对div设置自己需要的样式。html和css如下:

      <div class="upload-file">
        <input type="file" class="input-file" multiple="true">  // mulitiple属性控制是否允许上传多个文件
        点击上传图片
      </div>

必发88官网 1必发88官网 2

    .upload-file{
      position: relative;
      width: 100px;
      padding: 10px 15px;
      border: 1px solid rgb(119, 154, 80);
      border-radius: 5px;
      background-color: rgb(66, 215, 142);
      color: #333333;
      font-size: 14px;
      text-align: center;
      overflow: hidden;
    }

    .upload-file span{ //单行显示
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .upload-file:hover{ //简单的hover效果
      font-size: 15px;
      border-color: rgb(39, 226, 81);
    }

    .upload-file input[type='file']{
      height: 100%;
      width: 100%;
      position: absolute; //设置为绝对定位,不会影响到其他元素
      top: 0;
      right: 0;
      opacity: 0;   //透明度为0
      filter: alpha(opacity=0);
      cursor: pointer;
    }

View Code

  这样点击div,其实也就点击到了input标签,可已正常触发选择文件的。

  效果如下:

  必发88官网 3             必发88官网 4

   

  但是这样就会产生一个问题,如何获取选择文件的文件名称呢?需要用到file对象的name属性

样式美化

  原生的input标签样式单一,且在不同浏览器下的表现还不一致。所以为了美观和统一,我们需要自定义input标签的样式。

  实现的方式有很多中,这里采用的是:用一个div将input标签包裹,然后再将input标签透明度设置为0,再对div设置自己需要的样式。html和css如下:

      <div class="upload-file">
        <input type="file" class="input-file" multiple="true">  // mulitiple属性控制是否允许上传多个文件
        点击上传图片
      </div>

必发88官网 5必发88官网 6

    .upload-file{
      position: relative;
      width: 100px;
      padding: 10px 15px;
      border: 1px solid rgb(119, 154, 80);
      border-radius: 5px;
      background-color: rgb(66, 215, 142);
      color: #333333;
      font-size: 14px;
      text-align: center;
      overflow: hidden;
    }

    .upload-file span{ //单行显示
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .upload-file:hover{ //简单的hover效果
      font-size: 15px;
      border-color: rgb(39, 226, 81);
    }

    .upload-file input[type='file']{
      height: 100%;
      width: 100%;
      position: absolute; //设置为绝对定位,不会影响到其他元素
      top: 0;
      right: 0;
      opacity: 0;   //透明度为0
      filter: alpha(opacity=0);
      cursor: pointer;
    }

View Code

  这样点击div,其实也就点击到了input标签,可已正常触发选择文件的。

  效果如下:

  必发88官网 7             必发88官网 8

   

  但是这样就会产生一个问题,如何获取选择文件的文件名称呢?需要用到file对象的name属性

1.自定义input file样式

input file有自己默认的样式,而且这个样式一般是不能进行修改的,所以想自定义样式,思路是在input标签外套一层父级,a标签和div都可以,然后把input的透明度设置成0,把想要的样式都加到父级上,这样就能修改了
首先是CSS部分代码:

<style>
   a {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: red;
    line-height: 100px;
    text-align: center;
    color: black;
    text-decoration: none;
    position: relative;
    font-size: 25px;
   }

   a:hover {
    background: green;
   }

   input {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
   }
  </style>

然后是body对应内容

 <a/ href="#"> // 把/去掉就好了,要不总不显示
   图片上传
   <input type="file" value="浏览" />
  </a>

跟file类似的还有radio,想使用自定义的点或者图片,可以参照上面的写法.

必发88官网 9

上传按钮效果图

如果已经确定了上传文件的类型,可以直接指定接受的类型,这样能避免因类型不正确而带来的错误,使用属性accept指定文件类型,顺便把多文件上传的代码也放进去

<input type="file" value="浏览" name="up[]" id="up" multiple="multiple" accept="image/jpeg, image/gif"/>

filelist和file对象--获取文件名

  input元素选择文件后会返回FileList对象,比如

//input元素
var fileInput = document.querySelector('.input-file');
//filelist对象
var filelist = fileInput.files

//file对象 

var file = filelist.item(0)

或者 var file = filelist[0]

  我们知道,每个input[type='file']都有一个files属性,返回的就是filelist 就和nodelist类似,不是数组。filelist就是由多个file对象组成的,每个file对象都是一个文件。

  filelist对象有个length属性,可以获取长度;还有item(index)方法,可以获取到file对象,当然可以通过 filelist[index]来获取。

  file对象常用的属性有:

    lastModified : 返回当前 File 对象所引用文件最后修改时间, 自 1970年1月1日0:00 以来的毫秒数。
    lastModifiedDate : 返回当前 File 对象所引用文件最后修改时间的 Date 对象。
    name : 文件名。
    size : 文件大小。
    type :文件类型。

  所以我们可以通过file对象的name属性来获取到文件名,在修改到span元素中

    var fileInput = document.querySelector('.input-file');
    var tip = document.querySelector('.tip');

    fileInput.addEventListener('change',function(e){ //监听change事件,选择文件后触发
      if(this.files.length === 1){ //处理文件名
        tip.textContent = this.files[0].name;
      }else {
        tip.textContent = '已选择 '   this.files.length   ' 个文件';
      }
    })

  效果如下:

   必发88官网 10   必发88官网 11

  现在已经自定义了input[type='file']的样式,而且实现了原有的功能。那么如何实现图片预览呢?

filelist和file对象--获取文件名

  input元素选择文件后会返回FileList对象,比如

//input元素
var fileInput = document.querySelector('.input-file');
//filelist对象
var filelist = fileInput.files

//file对象 

var file = filelist.item(0)

或者 var file = filelist[0]

  我们知道,每个input[type='file']都有一个files属性,返回的就是filelist 就和nodelist类似,不是数组。filelist就是由多个file对象组成的,每个file对象都是一个文件。

  filelist对象有个length属性,可以获取长度;还有item(index)方法,可以获取到file对象,当然可以通过 filelist[index]来获取。

  file对象常用的属性有:

    lastModified : 返回当前 File 对象所引用文件最后修改时间, 自 1970年1月1日0:00 以来的毫秒数。
必发88官网,    lastModifiedDate : 返回当前 File 对象所引用文件最后修改时间的 Date 对象。
    name : 文件名。
    size : 文件大小。
    type :文件类型。

  所以我们可以通过file对象的name属性来获取到文件名,在修改到span元素中

    var fileInput = document.querySelector('.input-file');
    var tip = document.querySelector('.tip');

    fileInput.addEventListener('change',function(e){ //监听change事件,选择文件后触发
      if(this.files.length === 1){ //处理文件名
        tip.textContent = this.files[0].name;
      }else {
        tip.textContent = '已选择 '   this.files.length   ' 个文件';
      }
    })

  效果如下:

   必发88官网 12   必发88官网 13

  现在已经自定义了input[type='file']的样式,而且实现了原有的功能。那么如何实现图片预览呢?

2.上传预览

这部分就需要找到对应的上传图片,并且显示在屏幕上.可以上传之后显示返回的网络图片,也能显示本地的图片,网络图片依赖后台返回数据,这里只说一下怎么显示本地的图片,做预览
当图片上传成功之后,可以给input加一个onchange事件,这个事件会在上传之后触发

var up = document.getElementById("up");
up.onchange = function(){
    console.log(this.files);
}

我打印了一下this.files,它包含了上传的所有的文件,用法跟数组类似,也是下标取值,取出来的值包含了上传文件所有的信息,包括尺寸,文件类型,文件名等.多文件也一样,按上传顺序用下标取值.files还有length,能获取长度
接下来是获取本地图片的路径,然后给img标签赋值

var img = document.getElementById("im");
   var up = document.getElementById("up");
   up.onchange = function(){
    console.log(this.files.length);
    var blob2 = URL.createObjectURL(this.files[0]);
    img.src = blob2;
}

用了一个URL对象,根据对应上传文件创建了一个路径,然后给图片src赋值,就实现了上传图片预览的功能

FileReader 对象 --实现图片预览

   FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容。也就是说FIlereader对象可以读取到input选择的文件。filereader对象在读取file对象时,当读取完成时,readystate属性的值会变为DONE,会触发load事件。而且有多种读取方式:

  readAsBinaryString()读取完成后,result属性中包含原始数据的二进制数据,readAsDataURL()读取完成后,result属性中包含data:url格式的数据,readAsText()读取完成后,result属性中包含字符串格式的数据,readAsArrayBuffer()result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容。

  这里上传的时图片,所以使用readAsDataURL()读取。现在html中加入个预览触发按钮,而预览图片存放的区域。

//简单结构 
     <div class="preview">
        <button type="button" name="button">预览</button>
      </div>

//样式
    .preview{
      margin-top: 10px;
      width: 150px;
    }

    .preview img{
      margin: 5px 0;
      width: 100%;
    }

  实现预览功能,注释中已有详细解释,不再重复。注意一定要等filereader读取完成后,再进行赋值,不然图片的src属性会是空的

    var preview = document.querySelector('.preview')
    var previewBtn = preview.children[0];

    previewBtn.addEventListener('click',function(e){
      var filelist = fileInput.files;
      if(filelist.length < 1){
        alert("未选择图片,无法预览");
        return false;
      }

      [].slice.call(filelist).forEach(function(value,index){  //遍历file对象
        var fileReader = new FileReader(); //创建一个filereader对象
        var img = new Image();  //创建一个图片对象
        fileReader.readAsDataURL(value)  //读取所上传对的文件
        fileReader.onload = function(){
          img.src = this.result;   //读取完成后,赋值给img对象
          preview.appendChild(img)  //添加到预览区域
        }
      })
    })

  效果如下:

  必发88官网 14

FileReader 对象 --实现图片预览

   FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容。也就是说FIlereader对象可以读取到input选择的文件。filereader对象在读取file对象时,当读取完成时,readystate属性的值会变为DONE,会触发load事件。而且有多种读取方式:

  readAsBinaryString()读取完成后,result属性中包含原始数据的二进制数据,readAsDataURL()读取完成后,result属性中包含data:url格式的数据,readAsText()读取完成后,result属性中包含字符串格式的数据,readAsArrayBuffer()result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容。

  这里上传的时图片,所以使用readAsDataURL()读取。现在html中加入个预览触发按钮,而预览图片存放的区域。

//简单结构 
     <div class="preview">
        <button type="button" name="button">预览</button>
      </div>

//样式
    .preview{
      margin-top: 10px;
      width: 150px;
    }

    .preview img{
      margin: 5px 0;
      width: 100%;
    }

  实现预览功能,注释中已有详细解释,不再重复。注意一定要等filereader读取完成后,再进行赋值,不然图片的src属性会是空的

    var preview = document.querySelector('.preview')
    var previewBtn = preview.children[0];

    previewBtn.addEventListener('click',function(e){
      var filelist = fileInput.files;
      if(filelist.length < 1){
        alert("未选择图片,无法预览");
        return false;
      }

      [].slice.call(filelist).forEach(function(value,index){  //遍历file对象
        var fileReader = new FileReader(); //创建一个filereader对象
        var img = new Image();  //创建一个图片对象
        fileReader.readAsDataURL(value)  //读取所上传对的文件
        fileReader.onload = function(){
          img.src = this.result;   //读取完成后,赋值给img对象
          preview.appendChild(img)  //添加到预览区域
        }
      })
    })

  效果如下:

  必发88官网 15

3.FileReader 文件读取

FileReader提供了读取文件的方法和读取结果的事件类型,能帮助获取文件内容,也能对上传过程进行监听.它的使用有兼容问题,主要是还是IE兼容

必发88官网 16

FileReader浏览器兼容

FileReader的使用需要通过构造函数创建一个对象,然后对这个对象进行方法调用,它有几个方法,能把文件异步读到内存里:
1.readAsText(file,encoding):以纯文本形式读取文件,将读取到的文本保存在result属性中,第二个参数用于指定编码类型,可选。
2.readAsDataURL(file):读取文件以数据URL的形式保存在result属性中。
3.readAsBinaryString(file):读取文件并将一个二进制字符串保存在result属性中。
4.readAsArrayBuffer(file):读取文件并将一个包含文件人容的ArrayBuffer保存在result属性中.
FileReader也有对应的状态监听
事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

接下来,就用FileReader也实现一遍图片预览

var img = document.getElementById("im");
var up = document.getElementById("up");
up.onchange = function() {
    var fr = new FileReader();
    fr.onloadend = function(ev) {
     img.src = ev.target.result;
}
  fr.readAsDataURL(this.files[0]);
}

给FileReader对象一个读取完成的方法,使用readAsDataURL会返回一个url,这个值就保存在事件对象的result里,img通过加载这个地址,完成图片的加载

总结

  总结来说,就是  input[type='file']的files属性 --> filelist对象 --> file对象 --> filereader对象读取file对象。通过它们的一些参数值实现我们想要的功能。由于只是简单demo,不严谨的地方和丑陋的样式就多多包涵了。

  再下一步就是要上传图片到服务器了,会在下个随笔中记录。

总结

  总结来说,就是  input[type='file']的files属性 --> filelist对象 --> file对象 --> filereader对象读取file对象。通过它们的一些参数值实现我们想要的功能。由于只是简单demo,不严谨的地方和丑陋的样式就多多包涵了。

  再下一步就是要上传图片到服务器了,会在下个随笔中记录。

4.本地上传进度

不能上传比较大的文件,如果太小的图片,直接就是100%了,我测试使用的是视频.用法跟之前差不多,只不过上传过程使用onprogress方法去监听过程

var img = document.getElementById("im");
var up = document.getElementById("up");
up.onchange = function() {
    var fr = new FileReader();
    fr.readAsDataURL(this.files[0]);
    var total = this.files[0].size;
    fr.onprogress = function(ev) {
     console.log(ev.loaded / total);
    }
}

ev.loaded是当前上传的大小,total是上传的时候获取的文件总大小.就能计算本地上传的进度,进度条的话可以用<label>把结果显示就可以了,这个效果可以参照QQ邮箱上传大文件时候那个进度条来做.

5.服务器上传进度

这部分需要显示的是上传后台的进度,跟之前本地的有点区别,这部分主要还是使用ajax进行上传状态的监控,先看JQ版

var img = document.getElementById("im");
var up = document.getElementById("up");
up.onchange = function() {
    var formD = new FormData();
    formD.append("file", this.files[0]);
    $.ajax({
     type: "POST",
     url: "up.php",
     data: formD,
     processData: false,
     //必须false才会自动加上正确的Content-Type 
     contentType: false,
     xhr: function() {
      var xhr = $.ajaxSettings.xhr();
      if(onprogress && xhr.upload) {
       xhr.upload.addEventListener("progress", onprogress, false);
       return xhr;
      }
     }
    });
   }
function onprogress(evt) {
    var loaded = evt.loaded; //已经上传大小情况 
    var tot = evt.total; //附件总大小 
    var per = Math.floor(100 * loaded / tot); //已经上传的百分比 
    console.log(loaded, tot);
}

首先是formData,它可以模拟表单,使用formData能上传文件,在使用ajax上传的时候,先把图片加到formData对象里,通过对象传输图片
在ajax里,使用了好几个之前没用过的属性,第一个是processData,默认值是true,当data传来数据的时候,如果是一个对象,会处理转换成字符串,在这里,如果还使用true的话,会报错,所以设置成false.还有一个xhr,这个是需要返回一个XMLHttpRequest,jq的ajax没有progress,xhr能指定对应的XMLHttpRequest对象,所以需要给XMLHttpRequest加上progress方法,这样能监听进度,这样就能通过JQ完成上传的进度加载

本文由必发88官网发布,转载请注明来源:加载进程,样式美化及贯彻图片预览