jQuery自定义图片上传插件实例代码

摘要

1.jquery自定义插件方法2.表单文件样式调整3.利用表单数据，ajax上传图片4.js，css弹出层5.springmvc上传图片

效果

调用方式

$('#picUrl ').imgUpload({})，在代码内部为调用对象绑定了点击事件，点击弹出上传界面。

$(function(){$('#picUrl ')).imgUpload({ URL : ' %=BasePath % ')文件/上传。do ' })$(' # PiCurl ').imgUpload(' resize ')；/**弹出层水平垂直居中**/})jquery自定义插件要点

1.定义作用域

2.$.fn.***为每个jquery对象扩展方法

3.设置默认值

把这个还给我。每个人，支持链式调用

/**部分代码* */(函数($){ $)。fn。imgupload=function(options，param){ if(options的类型==' string '){ return $。fn。imgupload。方法[选项](this，param)；}/* *这个为jquery对象* */options=options | | { }；返回this.each(function() { /**this为数字正射影像图对象**/var状态=$ .数据（这个，' imgUploadData ')；var optsif(state){ opts=$ .扩展(state.options，options)；state.options=opts}else{ opts=$ .extend({}，$.fn.imgUpload.defaults，options)；$.数据（这个、' imgUploadData '、{ options 3360 opts })；} init(this)；});};$ .fn。imgupload。methods={ resize :函数(jq){ $(').主层')。css({ left:($(window)).width()-$(' .主层')。outwidth())/2，top:($(window).高度()-美元(' .主层')。outhealth())/2 })；} } $ .fn。imgupload。默认值={ width :100，height:200，URL : ' # ' })(jQuery)；利用表单数据，ajax上传文件

/**html5 formData**/函数上传(jq){ var formData=new formData()；var opts=$ .数据(jq，' imgUploadData ').选项；formData.append('file '，$('#imgFile')[0]).文件[0]);$.ajax({ url: opts.url，type: 'POST '，cache: false，data: formData，processData: false，contentType: false，success : function(URL){ console。信息(网址)；}，错误：函数(URL){控制台。信息(网址)；} }) }表单文件样式调整。主层a .上传{ padding: 4px 10pxheight: 20px线高： 20px相对位置：光标：指针；颜色： # 888背景# fafafaborder: 1px固体# dddb order-radius : 4px；飞越：隐藏；显示器：内联块；*显示：内联；*缩放： 1；宽度：90%;文本对齐：中心；} .表示“不”上传输入{位置：绝对值；font-size : 100 pxright :0 top : 0；opa城市3360 0；filter: alpha(不透明度=0);光标：指针}js弹出层样式

/***遮罩层样式**/.包裹覆盖层{位置：固定；左： 0；top:0宽度： 100%;高度： 100%;背景-color: rgba(0，0，0，0.3)；z索引：10;display:none}/**上传组件样式**/.主层{ position:absolute绝对值左侧：50%;前：50%；背景-color : # fff；宽度宽度：350像素高度： 150像素；}后台部分代码

@RequestMapping(值='/upload.do '，方法=RequestMethod .POST)私有void fildUpload(@ request param(值='文件'，必选=false)多文件文件，HttpServletRequest请求，HttpServletResponse resp)引发异常{ //获得物理路径webapp所在路径字符串路径根=请求。GetSession().getServletContext().getRealPath(" ")；字符串路径=' ';if(！file.isEmpty()){ //生成uuid作为文件名称String uuid=UUID.randomUUID().toString().replaceAll('-'，' ')；//获得文件类型（可以判断如果不是图片，禁止上传)字符串内容类型=文件。get content type()；//获得文件后缀名称字符串imageName=ContentType。子字符串(ContentType。indexof('/')1)；路径='/images/' uuid ' .imageNamefile.transferTo(新文件（路径根路径));}请求。setattribute(' imagesPath '，路径);} 以上所述是小编给大家介绍的jQuery自定义图片上传插件实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对我们网站的支持！