将图像博客添加到文件表单元素

Question

但如何将新的JPG图像插入输入表单元素或以其他方式可用，以便我可以将其上传到PHP脚本并访问$ _FILES？

here是如何将新JPG图像插入输入表单元素的快速示例。

<form id="myform" action="yourposturl" method="post" enctype="multipart/form-data">
    <input type="file" id="image-input"> <input type="submit">
</form>

<script src="https://alexcorvi.github.io/heic2any/dist/heic2any.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Answer 1

然后，添加表单内部的创建一个隐藏的文件输入字段，然后将转换后的JPG文件添加到隐藏的文件元素中。

$('#image-input').on('change', function(ev) {
    var blob = ev.target.files[0];
    heic2any({
        blob: blob,
        toType: "image/jpeg",
    })
    .then(function (resultBlob) {
        var convertedFile = new File([resultBlob], "converted_image.jpg", {type:"image/jpeg"});
        var fileList = new DataTransfer(); //create DataTransfer object
        fileList.items.add(convertedFile); //add the converted file to it
                
        var $hiddenInput = $('<input>', {
            type: 'file',
            name: 'converted-image',  
            style: 'display: none;', 
        });
        $hiddenInput[0].files = fileList.files; //update the hidden field's filelist by new filelist
                
        $('#myform').append($hiddenInput); //append the new hiddne field into your  form
    })
    .catch(function (x) {
        var error = "Error code: " + x.code + " " + x.message;
        console.log(error);
    });
});

在PHP后端您可以使用

$_FILES['converted-image']

获取文件