(1)图片预览
showPic:function(url){
var json = {
"data": [ //相册包含的图片,数组格式
{
"src": url, //原图地址
}
]
};
top.layer.photos({
photos: json
,anim: 0 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
});
},
(2)日期的格式化
dateFormat:function (timestamp, format) {
var _this = new Date(timestamp);
var o = {
"M+": _this.getMonth() + 1,
// month
"d+": _this.getDate(),
// day
"h+": _this.getHours(),
// hour
"m+": _this.getMinutes(),
// minute
"s+": _this.getSeconds(),
// second
"q+": Math.floor((_this.getMonth() + 3) / 3),
// quarter
"S": _this.getMilliseconds()
// millisecond
};
if (/(y+)/.test(format) || /(Y+)/.test(format)) {
format = format.replace(RegExp.$1, (_this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
}
(3)escapeHTML将< > & " '转成字符实体
escapeHTML: function(a){
a = "" + a;
return a.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");;
}
使用场景:
(1)用户在页面中录入(比如输入框) <script>alert(2);</script>, js将该内容提交给后端保存
(2)显示时,后端将字符串返回前端;js接收到之后:
a, 使用escapeHTML,将字符串转为 <script>alert(2);</script>此时,浏览器将能正确解析,因为浏览器接收到实体字符后,转成对应的尖括号等。
b, 不使用escapeHTML,浏览器一看到<,便认为是html标签的开始,直接把刚才的字符串当脚本执行了,这就是xss漏洞。
(4)unescapeHTML 还原html脚本 < > & " '
unescapeHTML: function(a){
a = "" + a;
return a.replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&").replace(/"/g, '"').replace(/'/g, "'");
},
(5)Ajax上传文件
uploadFile: function (fileObj, url,callback) {
var data = new FormData(fileObj);
// data.append("CustomField", "This is some extra data, testing");//如果要添加参数
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: url,
data: data,
processData: false, //prevent jQuery from automatically transforming the data into a query string
contentType: false,
cache: false,
timeout: 600000,
success: function (result) {
callback(result);
},
error:function(xhr, textStatus){
if(xhr.status == 0){
jp.info("连接失败,请检查网络!")
}else if(xhr.status == 404){
var errDetail ="<font color='red'>404,请求地址不存在!</font>";
top.layer.alert(errDetail , {
icon: 2,
area:['auto','auto'],
title:"请求出错"
})
}else if(xhr.status && xhr.responseText){
var errDetail ="<font color='red'>"+ xhr.responseText.replace(/[\r\n]/g,"<br>").replace(/[\r]/g,"<br>").replace(/[\n]/g,"<br>")+"</font>";
top.layer.alert(errDetail , {
icon: 2,
area:['80%','70%'],
title:xhr.status+"错误"
})
}else{
var errDetail =xhr.responseText=="<font color='red'>未知错误!</font>";
top.layer.alert(errDetail , {
icon: 2,
area:['auto','auto'],
title:"真悲剧,后台抛出异常了"
})
}
}
})
}
(6)下载
downloadFile: function(url, name) {
var $a = $("<a></a>").attr("href", url).attr("download", name);
$a[0].click();
},
(7)返回当前活跃的tab页面关联的iframe的Windows对象,方便layer弹窗调用父页面的方法。
getParent: function () {
return top.getActiveTab()[0].contentWindow;
}
(8)图片/文件上传
upImg:function(childPath,btnid,ysk,ysg,quality,minsize,url,callback){
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: './js/webuploader/Uploader.swf',
// 文件接收服务端。
server: url,
//参数
formData: {
dirPath: childPath
},
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#'+btnid,
//允许重复上传
duplicate :true,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
// 是否压缩图片, 默认如果是jpeg文件上传前会压缩,如果是false, 则图片在上传前不进行压缩
compress:{
// 压缩后的尺寸
width: ysk,
height: ysg,
// 图片质量,只有type为image/jpeg的时候才有效。
quality: quality,
// 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false
allowMagnify: false,
// 是否允许裁剪
crop: false,
// 是否保留头部meta信息
preserveHeaders: true,
// 如果发现压缩后文件大小比原来还大,则使用原来图片,此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,
// 单位字节,如果图片大小小于此值,不会采用压缩)
compressSize:50*1024//50
}
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
jp.loading("正在上传")
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
$(".cell").css("display", "block");
});
// 文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file, response ) {
callback(file,response);
});
// 文件上传失败,显示上传出错。
uploader.on( 'uploadError', function( file ) {
jp.error("出错了")
});
// 完成上传完了,成功或者失败,先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
});
}
调用
upImg("file","upfile",800,800,90,500*1024,'${ctx}/yy/picture/uploadFile',function( file, response){
if(response.success){
var url = response.body.path;
var filename = response.body.fileName;
$("#fileName").attr("href",url);
$("#fileName").text(filename);
jp.success("上传成功");
}else{
jp.error("出错了")
}
});
Java代码
public AjaxJson uploadFile( HttpServletRequest request, HttpServletResponse response) throws Exception {
AjaxJson j = new AjaxJson();
boolean flag = true;
j.getBody().put("path", "");
try {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
String dirPath = "file";
// 获取对应file对象
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
Iterator<String> fileIterator = multipartRequest.getFileNames();
while (fileIterator.hasNext()) {
String fileKey = fileIterator.next();
// 获取对应文件
MultipartFile multipartFile = fileMap.get(fileKey);
if (multipartFile.getSize() != 0L) {
InputStream is = multipartFile.getInputStream();
String file_name = multipartFile.getOriginalFilename();
file_name = RandomStringUtils.randomAlphanumeric(6) + "." + file_name;
String path = getPath2(dirPath);
String filePath = uploadLiu(path, file_name, is);
filePath = filePath.split("/opt")[1];
filePath = "https://www.dianzhangmen.cn/"+filePath;
j.getBody().put("path", filePath);
j.getBody().put("fileName", file_name);
}
}
j.setMsg("上传成功");
} catch (IOException e) {
flag = false;
j.setMsg("上传失败");
e.printStackTrace();
throw new Exception("上传失败");
}
j.setSuccess(flag);
return j;
}
来源:https://www.cnblogs.com/excellencesy/p/10574501.html