Javascript 从IMG标签到文件输入

我有一个base64 url为src的图像。我想使用输入文件（带有表单）将此图像发送到服务器。 因此，我需要将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;
                    });
            })
        }
    });
};

我正在使用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;
                    });
            })
        }
    });
};

形象
res.blob（））
.然后（blob=>{
文件=新文件（[blob]，“文件”，blob）
document.getElementById（'imgtbn'）。file=file；
});
})
}
});
};

我想有一个输入文件的裁剪图像填充

---

谢谢您抽出时间。

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

---

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

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

---

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

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

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

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

---

.

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

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

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