你的位置:首页 > 软件开发 > Java > input[type=file]样式美化及实现图片预览

input[type=file]样式美化及实现图片预览

发布时间:2017-11-24 20:53:48
前言  上传图片是常见的需求,多使用input标签。本文主要介绍 input标签的样式美化 和 实现图片预览。  用到的知识点有:    1、input标签的使用    2、filelist对象 和 file对象    3、fileReader对象样式美化  原生的input标签 ...

前言

  上传图片是常见的需求,多使用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>
input[type=file]样式美化及实现图片预览input[type=file]样式美化及实现图片预览
 .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标签,可已正常触发选择文件的。

  效果如下:

  input[type=file]样式美化及实现图片预览             input[type=file]样式美化及实现图片预览

   

  但是这样就会产生一个问题,如何获取选择文件的文件名称呢?需要用到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]样式美化及实现图片预览   input[type=file]样式美化及实现图片预览

  现在已经自定义了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]样式美化及实现图片预览

总结

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

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

原标题:input[type=file]样式美化及实现图片预览

关键词:图片

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。