html file 文件类型 赋值到img,基于jquery实现图片上传本地预览功能

当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的，如果网速慢或图片有问题，这样不但浪费客户时间同时也浪费服务器资源了，下面我们介绍利用js上传图片时本地实现预览，希望此方法对各位有所帮助哦。

一、原理

分为两步：

当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL)；

把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。

在这里，我们需要了解Javascript里File对象、Blob对象和window.URL.createObjectURL()方法。

1、File对象

File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.

下面来看获取FileList对象：

$('#upload').change(function(){

// 获取FileList的第一个元素

alert(document.getelementbyid('upload').files[0]);

});

2、Blob对象

一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.

我们想要得到的对象URL实际上就是从Blob这个对象获取的，因为File的接口继承Blob。下面就来把Blob对象转换成URL：

var f = document.getelementbyid('upload').files[0];

var src = window.URL.createObjectURL(f);

document.getElementById('preview').src = src;

一个比较完整的实例

HTML5 Upload

#destination{

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);

}

//处理file input加载的图片文件

$(document).ready(function(e) {

//判断浏览器是否有FileReader接口

if(typeof Fil