jQuery自定义图片上传插件实例代码
编程学习 2021-07-04 18:31www.dzhlxh.cn编程入门
这篇文章给大家介绍了jquery自定义图片上传插件的实例代码，非常不错，具有参考借鉴价值，需要的朋友一起看看吧
摘要
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自定义图片上传插件实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，长沙网络推广会及时回复大家的，在此也非常感谢大家对狼蚁SEO网站的支持！