使用AJAX将PDF文件以base64格式上传到服务器

Question

假设我想要将下列信息上传到服务器：

var info = {
    name: "John",
    age: 30,
    resume: resume.pdf  // base64 String
};

我的 AJAX 请求可能看起来是这样的：

$.ajax({
    url: "http://example.com",
    type: "POST",
    dataType: "JSON",
    data: info,
    success: function (response){
        // do something
    }
});

我的问题是如何修改一个AJAX调用，将resume.pdf文件（简历属性）作为base64字符串上传到服务器？

- Lior Elrom

---

为什么要对整个PDF进行Base64编码以发送到服务器？为什么不直接使用文件上传？ - Adam Merrifield

那是服务器的要求。 - Lior Elrom

简历.pdf是在互联网上的文件还是用户正在上传的文件？ - Adam Merrifield

@AdamMerrifield 这是用户正在上传的文件。 - Lior Elrom

Answer 1

我仍然不太明白为什么你要这样做，但如果你必须这样做...请参考FileReader 浏览器支持情况。 HTML

<form>
  <input type="file" name="file" id="resume">
  <input type="submit">
</form>

Javascript

$('form').on('submit', function (e) {
    e.preventDefault();

    var reader = new FileReader(),
        file = $('#resume')[0];

    if (!file.files.length) {
        alert('no file uploaded');
        return false;
    }

    reader.onload = function () {
        var data = reader.result,
            base64 = data.replace(/^[^,]*,/, ''),
            info = {
                name: "John",
                age: 30,
                resume: base64 //either leave this `basae64` or make it `data` if you want to leave the `data:application/pdf;base64,` at the start
            };

        $.ajax({
            url: "http://example.com",
            type: "POST",
            dataType: "JSON",
            data: info,
            success: function (response) {}
        });
    };

    reader.readAsDataURL(file.files[0]);
});

- Adam Merrifield

---

一个 API 的需求是将本地的 PDF 文件作为 base64 进行上传。您能否更改您的代码，使其从服务器而非用户表单中读取现有的 PDF 文件？ - Lior Elrom

@Lior，所以你想从用户的本地系统中提取一个PDF文件，将其转换为base64，并将其发送到服务器？如果没有用户交互（例如让用户选择要上传的文件的输入文件），这是不可能的。我希望你能看到并理解这个想法中的安全漏洞。 - Adam Merrifield

谢谢。就我所见，像Angular这样的现代框架最适合使用JSON。处理其他类型的请求似乎会创建混乱的代码。在性能方面，这肯定不是最佳方式，但这应该是设计Web标准的人们所考虑的。开发人员不应该回到石器时代，只因为人们拒绝屠杀他们神圣的标准牛（或以合理的方式扩展它们）。我知道..我想得太多了.. - user2173353