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实现的手风琴侧边菜单效果
Mar 29 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
python脚本内运行linux命令的方法
2015/07/02 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
python轮询机制控制led实例
2020/05/03 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
冰淇淋开店创业计划书
2014/02/01 职场文书
财产公证书
2014/04/10 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
利用python进行数据加载
2021/06/20 Python
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL