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 ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
Jquery获取radio选中的值
May 05 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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
实现“上一页”和“下一页按钮
2006/10/09 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python如何让类支持比较运算
2018/03/20 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
详解python tkinter 图片插入问题
2020/09/03 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
罗技美国官网:Logitech美国
2020/01/22 全球购物
关于元旦的广播稿
2014/02/16 职场文书
党员干部承诺书
2014/03/25 职场文书
企业党员个人自我评价
2014/09/20 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL