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

我正试图实现这一点：

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>

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

@自动连线

@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);
}

@Autowired
ImagesBo ImagesBo；
@凌驾
受保护的模型和视图HandlerRequestInternal（HttpServletRequest，
HttpServletResponse）引发异常{
ModelAndView模型=新的ModelAndView（“显示图像”）；
Map myModel=newhashmap（）；
Images img=imagesBo.getImage（）；
myModel.put（“image”，img.getStrImage（））；
返回新模型和视图（“目录中的列表”、“模型”、“myModel”）；
}

其中getStrImage（）是类Images中的一个函数

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

公共字符串getStrImage（）{
字节[]_字节=this.image；
字符串文件_String=“”；
对于（int i=0；i<_bytes.length；i++）{
文件_字符串+=（字符）_字节[i]；
}
返回文件字符串；
}

最后在show:image.jsp中，我使用了以下代码

<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>

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

正如我所说，这是完美的，但我不确定最好的方法。有人有更好的密码吗？还是一些建议

---

谢谢。

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

---

我不确定这是否是最佳实践，但我看到它被用于分配，并且我还使用此实现在过去的项目中保存图像

嗯。。我可以试着这样做，看看有什么更好。谢谢你的回答如果这是你满意的答案，请将其标记为已回答。谢谢，不客气！

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