input file 实现上传预览图片,以base64上传，兼容IE8+,firefox,chrome

前言

最近在公司开发一个项目，其中涉及到一个公能，主要是上传一些小图片，而且在网站上需要大量引用这个小图片的，对于上传一些小的头像等。一开始觉得直接上传就好了，但是发现这样子的话，一个小图片就会发送一个http请求资源，大量的小图片的请求资源的话，会造成服务器资源的负担。而且我希望在用户头像上传也可以不直接上传image,以其他的方式上传，可以将图像的信息存储在数据库中，这样子对于小图片还是有好处的。经过了几天的认真思考的查找资料，自己写了一个基于jquery实现的小插件。就可以简单的实现了小图片的以base64的DATA URL 的协议上传。

基本功能

1、基于插件，可以自定义样式，预览框的大小

2、可以设置上传图片的类型，图片的大小(建议100kb以内)

3、兼容IE8+,firefox,chrom

4、以DAT URL协议实现图片上传前预览，包括图片的实际大小

5、返回上传成功或者失败的信息

代码

previewUpload.js插件代码：

;(function($){
	$.fn.previewUpload=function(options){
		/**
		*默认选项配置
		*
		*/
		var defaults={
			//预览框的样色设置
			'preview':{
				'border':'1px dashed',
				'width':200,//必须int 
				'height':250,//必须int 

			},
			//上传操作框样式,默认为空，不做设置
			'uploadImage':{},
			//选择图片的按钮样式
			'btnCss':{
				'display':'inline-block',
				'line-height':'28px',
				'font-size':'14px',
				'text-align':'center',	
				'border':'1px solid #d0d0d5',
				'border-radius':'4px',
				'padding':'0 15px',
				'min-width':'40px',
				'background-color':'#fff',
				'background-repeat':'no-repeat',
				'background-position':'center',
				'-webkit-transition':'border-color .15s, background-color .15s',
				'transition':' border-color .15s, background-color .15s',
				'outline':'0 none',
				'cursor':'pointer',
				'overflow':'visible',
				'border':'1px solid #00a5e0',
				'background-color':'#00a5e0',
				'color':'#fff',
				'float':'left',
			},
			//input file的样式
			'inputCss':{
				'position':'absolute',
				'clip':'rect(0 0 0 0)',
			},
			//弹出框选择文件的类型
			'imageType':null,
			//设置图片的大小,int
			'imgSize':100,
			// 允许上传的图片格式
			'typeAllow':'jpeg,jpg,png,gif',
			// 定义选择文件时，弹出框文件显示类型，默认是所有图片
			'acceptType':'image/*',
			//读取base64编码的图片数据
			'imgblod':null,
			// ajax异步提交的数据的url
			'url':null,
			// 从php返回html元素的最外层id
			/**
			*eg:<span id="resinfo"><font color=green>上传成功</font></span>
			*/
			'infoid':'resinfo',
			//设置返回信息在页面显示的实际时间
			'statTime':2000

		}

		/**
		*继承覆盖默认配置
		*
		*/
		var config=$.ext