js实现图片预览

（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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");;  
        }

使用场景： 
（1）用户在页面中录入（比如输入框） <script>alert(2);</script>， js将该内容提交给后端保存 
（2）显示时，后端将字符串返回前端；js接收到之后： 
a, 使用escapeHTML，将字符串转为 &lt;script&gt;alert(2);&lt;/script&gt;此时，浏览器将能正确解析，因为浏览器接收到实体字符后，转成对应的尖括号等。 
b, 不使用escapeHTML，浏览器一看到<，便认为是html标签的开始，直接把刚才的字符串当脚本执行了，这就是xss漏洞。

（4）unescapeHTML 还原html脚本 < > & " ' 

 unescapeHTML: function(a){  
            a = "" + a;  
            return a.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/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(/[
]/g,"<br>").replace(/[
]/g,"<br>").replace(/[
]/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:{
                    // 压缩后的尺寸
                     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;
    }