input[type='file']样式美化及…

2018-06-24 00:53:00来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

前言

  上传图片是常见的需求,多使用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属性控制是否允许上传多个文件
        <span class="tip">点击上传图片</span>
      </div>
    .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标签,可已正常触发选择文件的。

  效果如下:

               

   

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

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 + ' 个文件';
      }
    })

  效果如下:

      

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

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)  //添加到预览区域
        }
      })
    })

  效果如下:

  

总结

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

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:zTree 节点文字过多处理方法

下一篇:11/24开会难点