摘要
1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片
效果
调用方式
$("#picUrl").imgUpload({})，在代码内部为调用对象绑定了click事件，点击弹出上传界面。
'+'file/upload.do'})
$("#picUrl").imgUpload("resize");/**弹出层水平垂直居中**/
})
jquery自定义插件要点
1.定义作用域
2.$.fn.***为每个jquery对象扩展方法
3.设置默认值
代码**/
(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上传文件
表单file样式调整
.a-upload input {
position: absolute;
font-size: 100px;
right:0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
position: absolute;
font-size: 100px;
right:0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
js,css弹出层样式
上传组件样式**/
.main-layer{
position:absolute;
left:50%;top:50%;
background-color: #fff;
width:350px;
height: 150px;
}
后台部分代码
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自定义图片上传插件实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对编程之家网站的支持！
原文链接：https://www.f2er.com/jquery/40220.html