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

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

摘要

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

效果

调用方式

$("#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 自定义图片上传