jQuery AJAX处理二进制数据(例：读取图片)

Posted 2022-02-03 susuHut

jQuery处理二进制流数据(例：读取图片)

前段时间在公司开发了轮播模块，有很多值得记录的知识点。在此记录一下。
长话短说。开发时，浏览器直接访问本地图片（即直接在img标签上贴 src ="D:/××"）时，会报错

Not allowed to load local resource: （原因就是浏览器处于安全考虑，禁止了直接访问），解决方法网上给出两种，一种是配置虚拟路径，另一种就是转成二进制数据读取。

所以我将图片转码，之后再在img标签中显示。
然后，我们项目前端用的是 jQuery ，jQuery直接处理 blob 数据是有点困难的，因为会将二进制数据转成 String。所以可以写一个js的处理方法，在前台调用。上代码

 	/**
     * 公用方法，jQuery处理图片流，用js写
     * @param url    数据流地址
     * @param args   图片路径 src : D:\\**\\**.jpg 注意键值对
     * @param success  成功之后的回调
     */
    function getBinary(url, args, success) 
        var xmlhttp = new XMLHttpRequest();
        var data = eval(args);
        var i = 0;
        for (var key in data) 
            if (i++ === 0) 
                url += '?' + key + "=" + data[key];
             else 
                url += '&' + key + "=" + data[key];
            
        
        xmlhttp.open("GET", url, true);
        xmlhttp.responseType = "blob";
        xmlhttp.onload = function () 
            success(this.response);
        ;
        xmlhttp.send();
    


	jQuery调用：
	function readImg() 
       getBinary("/homeRotation/IoReadImage",
            'src': $("#src").val(),
            function (data) 
                var img = $('#demo1');
                console.log(img);
                window.URL.revokeObjectURL(img.src);
                $('#demo1').attr('src', window.URL.createObjectURL(data));
            );
       
        readImg();

附上后台service代码

 	/**
     * 二进制流 读取本地文件(修改时用)
     * @param request
     * @param response
     */
    @Override
    public void IoReadImage(HttpServletRequest request, HttpServletResponse response) 
        ServletOutputStream out = null ;
        FileInputStream ips = null;
        String src = request.getParameter("src");
        if (src == null)
            src = "e:/2021/12/09\\\\6af250840cf14217ab268136efd70d16.jpg";
        
        try 
            ips = new FileInputStream(new File(src));
            response.setContentType("image/png");
            out = response.getOutputStream();
            // 读取文件流
            int len = 0;
            byte[] buffer = new byte[1024 * 10];
            while ((len = ips.read(buffer)) != -1)
                out.write(buffer,0,len);
            
            out.flush();
         catch (Exception e) 
            e.printStackTrace();
        finally 
            if (out != null && ips != null)
                try 
                    out.close();
                 catch (IOException e) 
                    e.printStackTrace();
                
                try 
                    ips.close();
                 catch (IOException e) 
                    e.printStackTrace();
                
            
        
    

主要方法 getBinary ，走一遍就了解了