摘要
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自定义图片上传插件实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对脚本之家网站的支持！
