前言
最近在公司开发一个项目,其中涉及到一个公能,主要是上传一些小图片,而且在网站上需要大量引用这个小图片的,对于上传一些小的头像等。一开始觉得直接上传就好了,但是发现这样子的话,一个小图片就会发送一个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