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