使用 jQuery 将文件添加到输入类型文件

Question

我正在使用一个名为 Croppie.js 的库来裁剪图像。我想做的是：

• 由于输入类型=只接受图像文件的文件上传图片
• 使用 Croppie.js 方法对其进行编辑
• 将生成的图片放回文件输入，替换原图

Croppie.js 能够生成一个 blob 多亏了它的函数 result。因此这就是它的样子：

$("#confirm-photo-edit").click(function(){
    $("#photo-to-crop").croppie('result', 'blob').then(function(editedImg){
        // Here something like $("#photo-input").files.push(editedImg);
    });
});

因此我的问题是：

• 我必须从 Blob 转换为文件吗？
• 如何用编辑后的图像替换输入中的原始图像，editedImg？

谢谢。

Answer 1

在大多数浏览器中，使用类型文件访问输入的文件本身是不可能的。这是出于安全原因。但是，可以将您的文件存储为基于字符的字符串表示形式。例如 base64 字符串。几乎每个编程环境都有一些东西可以解码 base64。