上传图片，实现图片预览

关于图片上传的预览：
	在html5之前，页面隐藏iframe和form，将图片上传到服务器(提交给了iframe，form有一个target属性)，返回图片地址，展示在iframe中。


	html5给我们提供了一个 'FileReader' API，可以在选择图片后，获取本地的图片文件，从而实现预览。


可直接查看FileReader API文档：
	https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader


(项目中，老早使用了，但是没笔记，忘记在哪里查找的资料，再次翻看找到了，这次笔记下！！)


打开文档，有demo，而且有个链接 'IE10以下的版本不支持FileReader()构造函数.不过可以利用滤镜来兼容旧版本的IE:兼容IE的图片本地预览.'。可点击开，然后查看源代码，看如何兼容IE10一下，这里我直接黏贴下项目中使用的代码：


	$('#file').change(function(event){
		var file = event.target.files[0];
      	var image_type = /^(?:image\/gif|image\/jpeg|image\/pipeg|image\/png)$/i;
      	// var image_type = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;


      	if(!image_type.test(file.type)){
      		layer.msg('只能上传jpg、png、git格式的图片！');		// 使用的是 '贤心的layer' 弹窗插件
      		return false;
      	}


  		if (window.FileReader) {
			var reader = new FileReader();
			reader.onload = function(event){
				$('#preview').attr('src', event.target.result);
			}
			reader.readAsDataURL(file);
  		}


  		// IE10以下，使用滤镜
		if (navigator.appName === "Microsoft Internet Explorer") {
			$('#preview').html('');
			$('#preview').eq(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $("#file").val();
		}


	});


网上这种文章很多，这里记录上一篇，感觉还不错:
	http://leonshi.com/2015/11/18/html5-filereader-preview-upload/