使用 HTML jQuery 和 Java 在 mySQL DB 中存储 PDF

Posted 2023-02-24

【中文标题】使用 HTML jQuery 和 Java 在 mySQL DB 中存储 PDF

【英文标题】：Store a PDF in a mySQL DB using HTML jQuery and Java

【发布时间】：2019-04-20 19:45:50

【问题描述】：

我需要在 mysql 数据库中存储一个 pdf（每个 pdf 最多

我已经设法用图像做到这一点，并一直试图重新利用该代码来存储 pdf；通过研究 *** 上的文章和其他问题。不幸的是，对我来说，大多数示例都与 php 有关。我已经能够阅读 pdf 并使用以下代码将其显示在页面中：

html：

<div class="form-group">
    <embed   id="image" src="" type="application/pdf">
    <input class="form-control-file col-lg-12 col-md-12 col-sm-12 col-xs-12 photo-input" type="file" id="photo" name="photo" placeholder="PDF">
</div>

jQuery:

$(document).on('change', '.photo-input', function()
    //Check for a valid image extension
    var img1 = this.files[0].type;
    alert("img1: " + img1);
    var mySubString = img1.substring(
        img1.lastIndexOf("image") + 13
    );
    alert("mySubString: " + mySubString)
    if($.inArray(mySubString, ['pdf']) == -1) 
        alert('Add invalid extension 1!');
        $('#image').attr('src', '');
    else
        //Check for a valid image size
        if (this.files[0].size < 10000000)
            readURL(this, this.id);
        else
            alert("This image is to large (must be < 1 MB).")
            $('#image').attr('src', '');
        
        var img1 = document.getElementById('image');
        img2 = (img1.getAttribute('src')).replace(/^data:application\/(pdf);base64,/, "");
    
);

function readURL(input, id) 
    if (input.files && input.files[0]) 
        var reader = new FileReader();

        reader.onload = function (e) 
            $('#image').attr('src', e.target.result);
        

        reader.readAsDataURL(input.files[0]);
    

然后我将要使用 ajax 存储的 pdf 传递给：

$.ajax(
        type: "POST",
        url: "MedicalPlanAddView",
        cache: false,
        data : 
         ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
         ssAccountID : sessionStorage.getItem('ssAccountID'),
         ssNameID : sessionStorage.getItem('ssNameID'),

         image : img2,
         mpNameAdd: $("#mpNameAdd").val(),
  , 
)

而服务器端的java是：

private static byte[] getByteArrayFromFile(final String handledDocument) throws IOException 
    final ByteArrayOutputStream baos = new ByteArrayOutputStream();
    final InputStream in = new FileInputStream(handledDocument);
    final byte[] buffer = new byte[500];
    int read = -1;
    while ((read = in.read(buffer)) > 0) 
        baos.write(buffer, 0, read);
    
    in.close();
    return baos.toByteArray();


ps.setString(1, nameId);
ps.setString(2, medicalPlanName);
ByteArrayInputStream bais = new 
ByteArrayInputStream(getByteArrayFromFile(medicalPlan)); //pdf image
ps.setBlob(3, bais); 
ps.setString(4, updateDate);

ps.executeUpdate();

【问题讨论】：

我不建议存储为 Blob。您可以将文件存储在硬盘上，并将文件的路径存储为 varchar (text) 数据类型。

您的 medicalPlan 变量包含您尝试用作文件名的长字符串“JVBERi0xLjcKCjQgMCBvYmoKKElkZW50aXR5KQplbmRvYmoKNS ......”。可能所需的文件具有不同的名称。

谢谢 Alexei，我传递的是实际文件，而不是地址，您能帮我正确处理吗？

【参考方案1】：

这就是我最终要做的。

HTML：

<div class="form-group">
        <embed   id="image" src="" type="application/pdf" class="img-thumbnail">
        <input class="form-control-file col-lg-12 col-md-12 col-sm-12 col-xs-12 photo-input" type="file" id="photo" name="photo" placeholder="PDF">
</div>

jQuery:

$(document).on('change', '.photo-input', function()
    //Check for a valid image extension
    var img1 = this.files[0].type;
    var mySubString = img1.substring(
        img1.lastIndexOf("image") + 13
    );
        if($.inArray(mySubString, ['pdf']) == -1) 
        alert('invalid extension!');
        $('#image').attr('src', 'data:application\/(pdf);base64');
    else
        //Check for a valid image size
        if (this.files[0].size < 10000000)
            readURL(this, this.id);
        else
            alert("This image is to large (must be < 1 MB).")
            $('#image').attr('src', 'data:application\/(pdf);base64');
        
        var img1 = document.getElementById('image');
        img2 = (img1.getAttribute('src')).replace(/^data:application\/(pdf);base64,/, "");
    
);

function readURL(input, id) 
    if (input.files && input.files[0]) 
        var reader = new FileReader();

        reader.onload = function (e) 
            $('#image').attr('src', e.target.result);
        

        reader.readAsDataURL(input.files[0]);
    


    submitHandler : function(showMPAddForm) 
        var img1 = document.getElementById('image');
        img2 = (img1.getAttribute('src')).replace(/^data:application\/(pdf);base64,/, "");

        $.ajax(
            type: "POST",
            url: "MedicalPlanAddView",
            cache: false,
            data : 
                ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
                ssAccountID : sessionStorage.getItem('ssAccountID'),
                ssNameID : sessionStorage.getItem('ssNameID'),

                image : img2,
                mpNameAdd: $("#mpNameAdd").val(),
            , 
        )
        .fail (function(jqXHR, textStatus, errorThrown) 
            //alert(jqXHR.responseText);
            $('#ajaxGetUserServletResponse13').text('Error adding Medical Plan.');
        )
        .done(function(responseJson)
            $('#ajaxGetUserServletResponse13').text('Medical Plan added.');
            showActionPlanDataTable();
        )
    

SQL：

                ps = c.prepareStatement(updateWithPhoto);
                ps.setString(1, medicalPlanName);

                BASE64Decoder decoder = new BASE64Decoder();
                byte[] imageByte = decoder.decodeBuffer(medicalPlan);
                ps.setBlob(2, new SerialBlob(imageByte));

                ps.setString(3, updateDate);
                ps.setString(4, medicalPlanId);

                ps.executeUpdate();