图片上传预览

<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=''>") 
})；