jQuery自定義圖片上傳插件實例代碼

更新時間：2017年04月04日 10:22:02 作者：不被女生喜歡好多年

這篇文章給大家介紹了jquery自定義圖片上傳插件的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友一起看看吧

摘要

1.jquery自定義插件方法
2.表單file樣式調(diào)整
3.利用formData,ajax上傳圖片
4.js,css彈出層
5.springmvc上傳圖片

效果

調(diào)用方式

$("#picUrl").imgUpload({})，在代碼內(nèi)部為調(diào)用對象綁定了click事件，點擊彈出上傳界面。

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

jquery自定義插件要點

1.定義作用域

2.$.fn.***為每個jquery對象擴展方法

3.設置默認值

4.return this.each，支持鏈式調(diào)用

/**部分代碼**/
(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樣式調(diào)整

.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自定義圖片上傳插件實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: