1. In modern browsers, it can be implemented using html5 related APIs. I temporarily think of these Blob FileReader btoa. You need to check the documentation for details

2. FormData can add additional fields with append. You need to open your mind here. A field ultimately represents a parameter passed to the backend. This parameter is actually a very abstract concept, and it depends on the agreement between your frontend and the backend.
   For example, when I want to send the request at the end, I can construct an additional object (its field values ​​need to be discussed with the background), add it to FormData, and send it to the server.

     var meta = {
            name:"",
            time:"",
            data:[]
        }
    formData.append("meta", JSON.stringify(meta));

The server finally deserializes this field into an object and obtains the value inside.

Finally, js file upload is a function provided after HTML5, so there are compatibility issues. To put it bluntly, it is the use of those new APIs. Go to MDN and take a look at the relevant documents and demos and it will be almost done

1.pdf should be convertible to base64. Excel has not been tested, but excel can be converted to Blob type. In theory, it should be converted to base6.

2.FormData adds another parameter as the unique mark of the file, and then passes it to the backend together.

I’m not sure about the first point, but the second point needs to go through the session and rely on the server

The second point is to add an input field to the formdata