Question

我正在努力实现这个目标：

1）在JSP页面中有一个文件上传器 2）选择图像并按“保存”按钮 3）然后在servlet中将图像保存到数据库中 4）所以当我需要从数据库中读取图像时

仅供参考我正在使用spring和hibernate。

我找到了一个有效的代码。这是html代码：

<form class="navbar-form" name="myform" id="myform" method="POST">
     <input type="file" id="files" name="file" /> 
     <input class="span2" type="hidden" name="image" id="image" value="-1">

     <span class="readBytesButtons">
          <button>Save</button>
     </span>
</form>

我有一个带有此代码的javascript

<script>

        function base64_encode (data) {
              var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
              var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
                ac = 0,
                enc = "",
                tmp_arr = [];

              if (!data) {
                return data;
              }

              do { // pack three octets into four hexets
                o1 = data.charCodeAt(i++);
                o2 = data.charCodeAt(i++);
                o3 = data.charCodeAt(i++);

                bits = o1 << 16 | o2 << 8 | o3;

                h1 = bits >> 18 & 0x3f;
                h2 = bits >> 12 & 0x3f;
                h3 = bits >> 6 & 0x3f;
                h4 = bits & 0x3f;

                // use hexets to index into b64, and append result to encoded string
                tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
              } while (i < data.length);

              enc = tmp_arr.join('');

              var r = data.length % 3;

              return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);

            }   


            function readBlob(opt_startByte, opt_stopByte) {

                var files = document.getElementById('files').files;
                if (!files.length) {
                    alert('Please select a file!');
                    return;
                }

                var file = files[0];
                var start = parseInt(opt_startByte) || 0;
                var stop = parseInt(opt_stopByte) || file.size - 1;

                var reader = new FileReader();

                // If we use onloadend, we need to check the readyState.
                reader.onloadend = function(evt) {
                    if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                        document.getElementById('myform').image.value= base64_encode(evt.target.result);
                        document.getElementById('myform').action = "saveImg.htm";
                        document.getElementById('myform').submit();

                    }
                };

                var blob = file.slice(start, stop + 1);
                reader.readAsBinaryString(blob);
            }

            document
                    .querySelector('.readBytesButtons')
                    .addEventListener(
                            'click',
                            function(evt) {
                                if (evt.target.tagName.toLowerCase() == 'button') {
                                    var startByte = evt.target
                                            .getAttribute('data-startbyte');
                                    var endByte = evt.target
                                            .getAttribute('data-endbyte');
                                    readBlob(startByte, endByte);
                                }
                            }, false);
        </script>

和我的sprint控制器的代码

@RequestMapping(value = "saveImg", method = RequestMethod.POST)
    public ModelAndView login(
            @RequestParam("image") String image,
            Model model) {

        try {

            Images newImage = new Images();

            newImage.setImage(image.getBytes());

            imagesBo.save(newImage);



            System.out.println(newImage.getStrImage());

            model.addAttribute("strImage", newImage.getStrImage());
            return new ModelAndView("index");
        } 
        catch (Exception e) {
            model.addAttribute("msg", e.getMessage());
            System.out.println("Eccezione: " + e.getMessage());
            return new ModelAndView("index");
        }

现在将图像保存在数据库中。现在，当我需要从数据库加载图像时，我就这样做了

@Autowired

@Autowired
ImagesBo imagesBo;

@Override
protected ModelAndView handleRequestInternal(HttpServletRequest request,
        HttpServletResponse response) throws Exception {

    ModelAndView model = new ModelAndView("show_image");

    Map<String, Object> myModel = new HashMap<String, Object>();

    Images img = imagesBo.getImage();

    myModel.put("image", img.getStrImage());

    return new ModelAndView("lista_libri_in_catalogo", "model", myModel);
}

其中getStrImage（）它是类图像中的一个函数

public String getStrImage() {
        byte[] _bytes = this.image;
        String file_string = "";

        for (int i = 0; i < _bytes.length; i++) {
            file_string += (char) _bytes[i];
        }
        return file_string;
    }

最后在show：image.jsp我使用此代码

<img src="data:img/jpeg;base64, ${model.strImage}" width="200px" height="200px"></div>

正如我所说，这完美无缺，但我不确定这样做的最佳方法。有人有更好的代码吗？或者一些建议？

感谢。

Answer 1

我不会将图像的内容直接保存到我的数据库中。我会将图像传输到一个文件夹，然后使用图像的位置将路径保存在我的数据库中。

我不确定这是否是最好的做法，但我看到它被用于分配，我也使用此实现来保存过去项目中的图像。

最佳实现：将图像文件上传到数据库并从数据库中读取图像

1 个答案: