图片上传预览

<form action="">
    <input type="file" class="file">
    <div class="box"></div>
</form> 
$(".file").change(function(){
  // File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.
  // 通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,
  // 也可以是来自由拖放操作生成的 DataTransfer对象.
  var f = document.getElementsByClassName('file');
  var files = f[0].files[0];
  // 一个Blob对象就是一个包含有只读原始数据的类文件对象.
  // Blob对象中的数据并不一定得是JavaScript中的原生形式.
  // File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.
   // 我们想要得到的对象URL实际上就是从Blob这个对象获取的,因为File的接口继承Blob。
  // 下面就来把Blob对象转换成URL:
  var src = window.URL.createObjectURL(files);
  // 在box中创建img标签并将src赋值给img的src
  $('.box').html("<img src='" + src +"' alt=''>") 
});

 

posted @ 2017-05-05 11:09  吕岳阳  阅读(142)  评论(0编辑  收藏  举报