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

【问题标题】：Add file to input type file with jQuery使用 jQuery 将文件添加到输入类型文件
【发布时间】：2018-12-03 22:50:19
【问题描述】：

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

由于输入 type=file 只接受图像文件，因此上传图片
感谢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？

谢谢。

【问题讨论】：

由于安全问题，不要认为这是可能的。因此，输入类型文件在很多方面受到限制。如果我错了，请纠正我。
您可以做的是将文件的文本表示（例如 base64）发送到普通（隐藏）输入以存储裁剪后的图像。
哦，听起来不错，是的。 Croppie 还可以生成 base64 图像。但是我如何将它发送到输入？会是文本输入吗？然后，我只需要将其值设置为 editedImg ?
假设editedImg持有你可以做的img的base64表示$('#normalTextInput').val(editedImg);
我不得不用substring 剪切字符串的一部分，因为croppie('result', 'base64') 也会在结果字符串中返回data:image/png;base64,，但是一旦我这样做了，它就像一个魅力。如果您希望我接受，您可以将您的评论作为答案！非常感谢！

标签： javascript jquery file input croppie

【解决方案1】：

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

【讨论】：