(1)首先来说一下,如何让 <input type='file' >成为你想要的模样。

最简单的方法就是在让<input type='file' >的透明度为0(完全透明),然后在input的下面设置自己的样式<div>,这样点击<div>时,由于input位于其上,因此就相当于是点了input。

如:

<div class='user_photo'>

  <p>上传头像</p>
  <input type='file' name ='photo' />

</div>我们可以这样来设置样式

.user_photo{
  width :100px;
  height: 100px;
  border-radius :5px;
  background-color :#eee;
  position :relative;

}

input[type='file']{
  opacity: 0;
  position :absolute;
  top :80px;
  width :100px;

}
p{
  position :absolute:
  top :78px:
  border-radius: 0px 0px 5px 5px;
  width :100px:
  height: 22px;
  background-color: rgba(0,0,0,0.5);
  color :#ff;f
  display: none;

}
.user_photo:hover p{

  display: block; 

}

当hover时的效果图:

(2)如何获取input上传的file的路径,并展示图片

  需要用到html5的FileReader接口:

  

  

以下面代码为例:

<div class='user_photo'>
  <div class='user_img'></div>
  <p>上传头像</p>
  <input type='file' name ='photo' />
</div>

  

 

监听input[type='file']的change事件,

获取file对象:var file=this.file[0];console.log(file);结果如下,

 由于无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。

 当读取成功后(reader.onload)所以我们从this.result中拿到读取结果,插到需要的位置。