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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
PHP个人网站架设连环讲(三)
2006/10/09 PHP
杏林同学录(二)
2006/10/09 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
Python中的魔法方法深入理解
2014/07/09 Python
python使用pil生成缩略图的方法
2015/03/26 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
四年级科学教学反思
2014/02/10 职场文书
建筑安全生产责任书
2014/07/22 职场文书