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


Posted in jQuery onApril 04, 2017

摘要

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

效果

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

调用方式

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

$(function(){
$("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'})
$("#picUrl").imgUpload("resize");/**弹出层水平垂直居中**/
})

jquery自定义插件要点

1.定义作用域

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

3.设置默认值

4.return this.each,支持链式调用

/**部分代码**/
(function($){
 $.fn.imgUpload=function(options,param){
  if(typeof options =="string"){
   return $.fn.imgUpload.methods[options](this,param);
  }
  /**this为jquery对象**/
  options = options || {};
  return this.each(function() {
   /**this 为 dom 对象**/
   var state=$.data(this,"imgUploadData");
   var opts;
   if(state){
    opts = $.extend(state.options, options);
    state.options = opts;
   }else{
    opts = $.extend({},$.fn.imgUpload.defaults,options);
    $.data(this,"imgUploadData",{options:opts});
   }
   init(this);
 });
 };
 $.fn.imgUpload.methods={
  resize:function(jq){
    $(".main-layer").css({
    left:($(window).width()-$(".main-layer").outerWidth())/2,
    top:($(window).height()-$(".main-layer").outerHeight())/2
   });
   
  }
 }
 $.fn.imgUpload.defaults={
  width:100,
  height:200,
  url:'#'
 }
})(jQuery);

利用formData,ajax上传文件

/**html5 formData**/
 function upload(jq){
  var formData=new FormData();
  var opts = $.data(jq,"imgUploadData").options;
  formData.append('file',$("#imgFile")[0].files[0]);
  $.ajax({
   url: opts.url,
   type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false,
    success:function(url){
    console.info(url);
   },
   error:function(url){
    console.info(url);
   }
  })
 }

表单file样式调整

.main-layer .a-upload { 
 padding: 4px 10px; 
 height: 20px; 
 line-height: 20px; 
 position: relative; 
 cursor: pointer; 
 color: #888; 
 background: #fafafa; 
 border: 1px solid #ddd; 
 border-radius: 4px; 
 overflow: hidden; 
 display: inline-block; 
 *display: inline; 
 *zoom: 1 ;
 width:90%;
 text-align: center;
} 
 
.a-upload input { 
 position: absolute; 
 font-size: 100px; 
 right:0; 
 top: 0; 
 opacity: 0; 
 filter: alpha(opacity=0); 
 cursor: pointer 
}

js,css弹出层样式

/***遮罩层样式**/
.wrap-overlayer{
 position: fixed;
 left: 0;
 top:0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.3);
 z-index:10;
 display:none;
}
/**上传组件样式**/
.main-layer{
 position:absolute;
 left:50%;top:50%;
 background-color: #fff;
 width:350px;
 height: 150px;
}

后台部分代码

@RequestMapping(value="/upload.do",method=RequestMethod.POST) 
  private void fildUpload(@RequestParam(value="file",required=false) MultipartFile file, 
    HttpServletRequest request,HttpServletResponse resp)throws Exception{  
   //获得物理路径webapp所在路径 
   String pathRoot = request.getSession().getServletContext().getRealPath(""); 
   String path=""; 
   if(!file.isEmpty()){ 
    //生成uuid作为文件名称 
    String uuid = UUID.randomUUID().toString().replaceAll("-",""); 
    //获得文件类型(可以判断如果不是图片,禁止上传) 
    String contentType=file.getContentType(); 
    //获得文件后缀名称 
    String imageName=contentType.substring(contentType.indexOf("/")+1); 
    path="/images/"+uuid+"."+imageName; 
    file.transferTo(new File(pathRoot+path)); 
   } 
   request.setAttribute("imagesPath", path); 
  }

以上所述是小编给大家介绍的jQuery自定义图片上传插件实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery操作css样式
May 15 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 #jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 #jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 #jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 #jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 #jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 #jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 #jQuery
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
Python抓取电影天堂电影信息的代码
2016/04/07 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Django之路由层的实现
2019/09/09 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
工作决心书
2014/03/11 职场文书
自主招生学校推荐信
2014/09/26 职场文书
综合素质自我评价评语
2015/03/06 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python