1。jquery自定义插件方法
2.表样单文件式调整
3.利用formData, ajax上传图片
4.js、css弹出层
5. springmvc上传图片
<代码> $ (" # picUrl ") .imgUpload({}), 在代码内部为调用对象绑定了点击事件,点击弹出上传界面。
$(函数(){
$ (" # picUrl ") .imgUpload ({url:“& lt; %=basePath %比”+“文件/upload.do”})
$ (" # picUrl ") .imgUpload("调整");/* *弹出层水平垂直居中* */})
1。定义作用域
2。.fn美元。* * *为每个jquery对象扩展方法
3。设置默认值
4。返回this.each支持链式调用
/* *部分代码* */(函数(美元){
$ .fn.imgUpload=函数(选项,参数){
如果(typeof选项==白址?{
返回$ .fn.imgUpload.methods[选项](这一点,参数);
}/* *这为jquery对象* */选项=选项| | {};
返回this.each(函数(){/* *这为dom对象* */国家=$ var . data(这一点,“imgUploadData”);
var选择;
如果(状态){
选择=$ .extend(状态。选项,选项);
状态。选择=选择;
其他}{
选择=$ .extend ({}, .fn.imgUpload.defaults美元,选项);
$ . data (“imgUploadData”,{选项:选择});
}
init ();
});
};
$ .fn.imgUpload.methods={
调整:函数(金桥){
$ (" .main-layer ") . css ({
左:美元(窗口).width()——美元(“.main-layer”) .outerWidth ())/2,
:($(窗口).height()——美元(“.main-layer”) .outerHeight ())/2
});
}
}
$ .fn.imgUpload.defaults={
宽度:100年,
身高:200,
url:“#”
}
})(jQuery);
/* * html5 formData * */函数上传(金桥){
var formData=https://www.yisu.com/zixun/new formData ();
var选择=$ . data(金桥imgUploadData) .options;
formData.append(“文件”,$ (" # imgFile ") [0] .files [0]);
. ajax({美元
url: opts.url,
类型:“文章”,
缓存:假的,
数据:formData,
processData:假的,
contentType:假的,
成功:函数(url) {
console.info (url);
},
错误:函数(url) {
console.info (url);
}
}）
}
.main-layer .a-upload {
填充:4 px 10 px;
高度:20 px;
行高:20 px;
位置:相对;
光标:指针;
颜色:# 888;
背景:# fafafa;
边界:1 px固体# ddd;
border - radius: 4 px;
溢出:隐藏;
显示:inline-block;
*显示:内联;
*变焦:1;
宽度:90%;
text-align:中心;
}
.a-upload输入{
位置:绝对的;
字体大小:100 px;
右:0;
上图:0;
透明度:0;
过滤器:α(不透明度=0);
光标:指针
}
/* * *遮罩层样式* */.wrap-overlayer {
位置:固定;
左:0;
上图:0;
宽度:100%;
高度:100%;
background - color: rgba (0, 0, 0, 0.3);
z - index: 10;
显示:没有;
}/* *上传组件样式* */.main-layer {
位置:绝对的;
左:50%,最高:50%;
background - color: # fff;
宽度:350 px;
身高:150 px;
}
@RequestMapping (value=" https://www.yisu.com/upload.do ",方法=RequestMethod.POST)
私人空间fildUpload (@RequestParam (value=" https://www.yisu.com/zixun/file ",要求=false) MultipartFile文件,
HttpServletRequest请求,HttpServletResponse resp)抛出异常{//获得物理路径webapp所在路径
字符串pathRoot=request.getSession () .getServletContext () .getRealPath (" ");
字符串路径=" ";
如果(! file.isEmpty ()) {//生成uuid作为文件名称
字符串uuid=UUID.randomUUID () .toString () .replaceAll (“-”、“);//获得文件类型(可以判断如果不是图片,禁止上传)
字符串contentType=file.getContentType ();//获得文件后缀名称
字符串imageName=contentType.substring (contentType.indexOf (“/? + 1);
路径="/图片/" + uuid + + imageName“。”;
文件。transferTo(新文件(pathRoot +路径));
}
请求。setAttribute (“imagesPath”,路径);
}
以上所述是小编给大家介绍的jQuery自定义图片上传插件实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留的言,小编会及时回复大家的,在此也非常感谢大家对网站的支持!
