0

我有一个带有 base64 url​​ 作为 src 的图像。我想使用输入文件（带有表单）将此图像发送到服务器。所以，我需要将 img 标签转换为输入文件。

我正在使用插件 Croppie 来裁剪图像。然后，将结果写入 img 标签。

我试图将 img 标签转换为文件。但后来我不知道如何将文件转换为输入文件。

<div>
    <label for="img">Image</label><input type="file" name="img" id="img" value=""/>
</div>
<div>
    <img id="outImg" />
    <input type="file" name="imgtbn" id="imgtbn" value=""/>
</div>



 document.getElementById('img').onchange = function (evt) {
    var output = document.getElementById('outImg');
    output.src = URL.createObjectURL(evt.target.files[0]);


    if(this.c!=undefined)
    {
        this.c.destroy();
    }
    var el = document.getElementById('outImg');
    this.c = new Croppie(el, {
        viewport: { width: 300, height: 300 },
        boundary: { width: 900, height: 300 },
        showZoomer: false,
        enableOrientation: true,
        update: function (data) {
            this.result('base64').then(function(dataImg) {
                $('#imgCropped').attr('src', dataImg);

                img = document.getElementById('imgCropped');

                fetch(img.src)
                    .then(res => res.blob())
                    .then(blob => {
                        file = new File([blob], 'file', blob)
                        document.getElementById('imgtbn').file = file;
                    });
            })
        }
    });
};

我想要一个用裁剪后的图像填充的输入文件。

感谢您的时间。

4

2 回答 2

2

你不能。您不仅不能在文件标签中使用 base64，而且只能在实际文件中使用，而且您甚至根本无法在 Javascript 中设置文件输入的值。这是一个安全问题。

但是你为什么想要？如果您已经将文件编码为 base64，则任何文本输入都可以将其发送到服务器。我可能会使用 <input type="hidden"> 因为显示代码没有意义。如果您想要预览，请使用 img 标签。

于 2019-03-23T14:40:47.733 回答
0

正如 Amunium 所说，文件输入是只读的。

将 base64 图像保存到隐藏输入是最好的方法。

可以以编程方式清空文件输入值，但它们仍将被提交；虽然是空​​的。

有一个关于如何以简单的方式完成这项工作的准系统解释。

于 2021-03-07T21:26:53.853 回答