Flash was disabled by various manufacturers, and SWFupload was modified to be compatible with H5 file upload.

As Flash is gradually phased out by browser vendors, plug-ins are disabled.
The upload button on many older systems that use swfupload doesn’t work with continuous clicks.

After analyzing the source code, it is found that the Flash version mounts the event processing process into jquery and creates a SWFUpload instance to handle file uploads.

Therefore, the main point of transforming the flash version into the H5 version is to replace the flash component with an H5 upload component, and transform the interaction between flash and js into pure javascript.

Add a new file h5upload.js

var H5Upload;

if (H5Upload == undefined) {
    H5Upload = function (settings) {
        this.initH5Upload(settings);
    };
}

H5Upload.instances = {};
H5Upload.movieCount = 0;
H5Upload.version = "2.2.0 2009-03-25";

H5Upload.prototype.initH5Upload = function (settings) {
    try {
        this.customSettings = {};	// A container where developers can place their own settings associated with this instance.
        this.settings = settings;
        this.eventQueue = [];
        this.movieName = "H5Upload_" + (H5Upload.movieCount++);
        this.movieElement = null;


        // Setup global control tracking
        H5Upload.instances[this.movieName] = this;

        // Load the settings.  Load the Flash movie.
        this.initSettings();
        this.loadHtml();
    } catch (ex) {
        delete H5Upload.instances[this.movieName];
        throw ex;
    }
};

H5Upload.prototype.loadHtml = function () {
    var targetElement, tempParent;

    // Make sure an element with the ID we are going to use doesn't already exist
    if (document.getElementById(this.movieName) !== null) {
        throw "ID " + this.movieName + " is already in use. The Flash Object could not be added";
    }

    // Get the element where we will be placing the flash movie
    targetElement = document.getElementById(this.settings.button_placeholder_id) || this.settings.button_placeholder;

    if (targetElement == undefined) {
        throw "Could not find the placeholder element: " + this.settings.button_placeholder_id;
    }

    // Append the container and load the flash
    tempParent = document.createElement("div");
    tempParent.innerHTML = this.getH5HTML();	// Using innerHTML is non-standard but the only sensible way to dynamically add Flash in IE (and maybe other browsers)
    targetElement.parentNode.replaceChild(tempParent.firstChild, targetElement);

    this.initFileElement();
    // Fix IE Flash/Form bug
    if (window[this.movieName] == undefined && this.fileElement) {
        window[this.movieName] = this.fileElement;
    }
}

H5Upload.prototype.getH5HTML = function () {
    return [
        '<div style="width:' + this.settings.button_width + 'px;height:' + this.settings.button_height + 'px;overflow:hidden;position:relative;">',
        '<div style="width:' + this.settings.button_width + 'px;height:' + this.settings.button_height + 'px;line-height:' + this.settings.button_height + 'px;text-align:center;' + this.settings.button_text_style + 'background:url(' + this.settings.button_image_url + ') center center no-repeat #1199ff;">',
        this.settings.button_text,
        '</div>',
        '<input type="file" id="' + this.movieName + '" ' + (this.customSettings.single ? '' :' multiple')+' accept="' + this.settings.file_types.replace(/;/g,',').replace(/\*/g,'') + '" style="position:absolute;left:0;top:0;opacity:0;height:' + this.settings.button_height + 'px">',
        '</div>'
    ].join("");
}

H5Upload.prototype.initFileElement = function () {
    var self = this;

    if (this.fileElement == undefined) {
        this.fileElement = $('#' + this.movieName);
        this.fileElement.on('change', function (e) { self.onSelectFile(e) });
    }

    if (this.fileElement === null) {
        throw "Could not find Upload element";
    }
    
    return this.fileElement;
}
H5Upload.prototype.onSelectFile = function (e) {
    var files = this.fileElement[0].files;

    if (files.length > 0) {
        this.uploadNext(files, 0);
    }
}

H5Upload.prototype.uploadNext = function (files, idx) {
    var self = this
    if (files.length > idx) {
        this.uploadFile(files[idx], function () {
            self.uploadNext(files, idx + 1);
        })
    } else {
        this.queueEvent('upload_complete_handler', [files]);
    }
}

H5Upload.prototype.uploadFile = function (file, uploadNext) {
    var self=this
    var options = {
        url: this.settings.upload_url,
        type: 'POST',
        dataType: 'json',
        success: function (json) {
            if (json.status == 1) {
                self.queueEvent('upload_success_handler', [file, json]);
                uploadNext(true, json)
            } else {
                self.queueEvent('upload_error_handler', [file, 1, json.msg]);
                uploadNext(false, json)
            }
        },
        error: function (xhr) {
            self.queueEvent('upload_error_handler', [file]);
            uploadNext(false)

        }
    };
    options.data = new FormData();
    options.data.append('Filedata', file);
    options.cache = false;
    options.processData = false;
    options.contentType = false;
    options.xhr = function () { //上传进度的显示
        var xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
            xhr.upload.addEventListener('progress', function (event) {
                var percent = Math.floor(event.loaded / event.total * 100);
                self.queueEvent('upload_progress_handler', [file, event.loaded]);
            }, false);
        }
        return xhr;
    };
    $.ajax(options);
}

// Delete part of the interaction between flash and js
H5Upload.prototype.callFlash = function (functionName, argumentArray) {
    console.log('call:' + functionName, argumentArray);
    return {};
}
//Register all the methods in the original upload class file
for (var funcname in SWFUpload.prototype) {
    if (!H5Upload.prototype[funcname]) {
        H5Upload.prototype[funcname] = SWFUpload.prototype[funcname];
    }
}

Add the upload.js file to the head when the html page is called

<script src="${base}/thirdparty/swfupload/h5upload.js" type="text/javascript"></script>

var swfu
window.onload=function() {
	//...code
	swfu=new H5Upload({
        //....settings code
   });
}

The idea is to create a file selection box to replace the flash component, monitor file selection events, manually grab files and upload them asynchronously, realize basic single-file and multi-file upload, progress tracking and other functions, and realize display and call back.