javascript - 如何将文件对象传递给 Safari 中的输入类型=文件？

Question

最近我尝试开发压缩图像功能，但现在我遇到了 DataTransfer.files 不适用于 Safari 浏览器的问题，这导致我的功能仅适用于 Android 设备。我可以知道文件对象设置为输入类型=文件有什么解决方案吗？下面提供了我当前的代码。

<!-- New Compress Method Start -->
     <input style="color:white;" type="file" id="bt_ori_image" name="file_dep"
            accept="image/png, image/jpeg, image/jpg" class="form-control-file" required>
     <input type="file" name="" id="bt_current_file" style="color:white!important;">
     <img src="" alt="Image preview..." id="bt_compress_image" 
          style="display:block;width:250px;height:250px;margin:10px;">
     <a href="" id="bt_image_anchor_tag" target="_blank" style="display:none;">
        Click To View Compress Image
     </a>
<!-- New Compress Method End -->

<script>
    var MIME_TYPE = "";
    var QUALITY = "";
    var session = $('#session_lang').val();

    // Image Input Start
    var input = document.getElementById("bt_ori_image");
    // Image Input End
    
    input.onchange = function (ev) {

        var current_file_name = input.value;
        var origin_name = current_file_name.replace(/C:\\fakepath\\/, "");
        // console.log("Filename: "+origin_name)

        // Get File And Generate To Blob Start
        var file = ev.target.files[0];
        const blobURL = URL.createObjectURL(file);
        var img = new Image();
        img.src = blobURL;
        img.onerror = function () {
            URL.revokeObjectURL(this.src);
            // Handle the failure properly
            // console.log("Cannot load image");
            msg = "Wrong Image Type. Please Try Another One";
            $('#bt_ori_image').val("");
            sweet_alert_format(msg, session);
            img = "";
        };
        img.onload = function () {
            var height = this.height;
            var width = this.width;
            var FileSize = file.size;
            var FileType = file.type;
            var FileValue = $('#bt_ori_image').val();
            var MIME_TYPE = openFile(FileValue);

            // console.log("File Value: "+FileValue)
            // console.log("Current_file_type: "+MIME_TYPE)
            // console.log("Current_height: "+height);
            // console.log("Current_width: "+width);
            // console.log("Original_size: "+FileSize);
            // console.log("Current_type: "+FileType);

            if(MIME_TYPE == "1"){
                msg = "Wrong Image Type. Please Try Another One";
                $('#bt_ori_image').val("");
                sweet_alert_format(msg, session);
                img = "";
            }

            if (FileSize >= 8000000) {

                // msg = "Image size(mobile) exceeds 8MB, file will not be uploaded.";
                // alert(msg);
                if (session == "en") {
                msg = "ขนาดภาพ (มือถือ) เกิน 8MB  ไฟล์จะไม่ถูกอัพโหลด&quot;
                } else {
                msg = "Image size(mobile) exceeds 8MB, file will not be uploaded."
                }
                $('#bt_ori_image').val('');
                img = "";
                sweet_alert_format(msg, session);

            }
            else {
                QUALITY = 0.9;
            }
            console.log("Current quality: "+QUALITY)
            
            var divider = "";
            var h_divider = "";
            var w_divider = "";

            if(width >= 5000){ w_divider = 16 }
            else if (width >= 4500){ w_divider = 12}
            else if (width >= 3500){ w_divider = 10}
            else if (width >= 3000){ w_divider = 8}
            else if (width >= 2500){ w_divider = 7}
            else if (width >= 2000){ w_divider = 6}
            else if (width >= 1500){ w_divider = 4}
            else if (width <= 600){ w_divider = 1}
            else { w_divider = 2 }

            if(height >= 5000){ h_divider = 11 }
            // else if (height >= 4500){ h_divider = 9}
            else if (height >= 4000){ h_divider = 9}
            else if (height >= 3000){ h_divider = 7}
            else if (height >= 2500){ h_divider = 5}
            // else if (height >= 2000){ h_divider = 4}
            // else if (height >= 1500){ h_divider = 3}
            else if (height <= 1500){ h_divider = 1}
            else { h_divider = 2 }

            if(height >= 5500 && width >= 4000){
                w_divider = 8;
                h_divider = 7;
            }

            const MAX_WIDTH = width/w_divider;
            const MAX_HEIGHT = height/h_divider;

            // console.log("New_height: "+MAX_HEIGHT);
            // console.log("New_width: "+MAX_WIDTH);

            URL.revokeObjectURL(this.src);
            const [newWidth, newHeight] = calculateSize(img, MAX_WIDTH, MAX_HEIGHT);
            const canvas = document.createElement("canvas");
            canvas.width = newWidth;
            canvas.height = newHeight;
            const ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, newWidth, newHeight);
            canvas.toBlob(
                (blob) => {

                    // View In Anchor Tag Start
                    let link = document.getElementById("bt_image_anchor_tag");
                    // link.download = origin_name;
                    link.href = URL.createObjectURL(blob);
                    // View In Anchor Tage End

                    // View In Normal Input Start
                    var current_url = URL.createObjectURL(blob);
                    // $('#current_data').val(current_url);
                    // console.warn("Current_file_size: "+blob.size)
                    // document.getElementById("root").append(link);
                    // View In Normal Input End

                    // Attach Image Start
                    // document.getElementById("bt_compress_image").src = current_url;
                    $("#bt_compress_image").attr("src", current_url);
                    // Attach Image End

                    // Show Image And Link Start
                    // $("#image_anchor_tag").css("display", "block");
                    // $("#compress_image").css("display", "block");
                    // Show Image And Link End

                    var new_date = new Date().getTime();
                    var new_file_name = new_date+"."+MIME_TYPE;
                    console.log("Current_file_name: "+new_file_name);

                    let file2 = new File([blob], new_file_name, {type:"mime/type", lastModified:new Date().getTime()});
                    alert("File2: "+file2);
                    console.log("File2: "+file2);

                    let container = new DataTransfer();
                    container.items.add(file2);
                    let fileInputElement = document.getElementById('bt_current_file');
                    fileInputElement.files = container.files;

                    console.log("Container file: "+container.files);
                    alert("Container file: "+container.files);
                    console.log("Current file: "+fileInputElement.files);
                    alert("Current file: "+fileInputElement.files);
                    // $("#bt_current_file").val(container.files);
                    console.log(fileInputElement.file)
                    console.warn("Quality: "+QUALITY+", H_Divider: "+h_divider+", W_Divider: "+w_divider);
                    // link.click();

                    // var hidden_elem = document.getElementById("blob_data");
                    // hidden_elem.value = URL.createObjectURL(blob);

                },
                MIME_TYPE,
                QUALITY
            );
            // document.getElementById("root").append(canvas);
            // document.getElementById("current_data").append(canvas.toDataURL());
            
        };
        // Get File And Generate To Blob End
    };

    // Compress To Specific Size Start
    function calculateSize(img, maxWidth, maxHeight) {
        let width = img.width;
        let height = img.height;

        width = maxWidth;
        height = maxHeight;
        return [width, height];
    }
    // Compress To Specific Size End

    // Check File Type Start
    function openFile(file) {
        var extension = file.substr( (file.lastIndexOf('.') +1) );
        switch(extension) {
            case 'jpg':
                return 'jpg'
            break;
            case 'png':
                return 'png'
            break;
            case 'jpeg':
                return 'jpeg' 
            break;
            default:
                return '1'
        }
    };
    // Check File Type End

</script>

当前代码的目的是将压缩图像带到服务器端并上传到谷歌云存储。因此，如果您有任何想法，请给我建议。谢谢。

标签： javascriptjquery