（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; }
