The second method is uploading using FileReader where a normal POST request is sent. Interactive API reference for the JavaScript FileReader Object. Simply drag and drop any file or folder onto the application icon or program window.

The following code will generate the file input field.

Lo que te falta es muy sencillo: definir lectores para los ficheros, y asignar la acción que se ejecutará cuando se cargue: function handleFileSelect(evt) { var files = evt.target.files; // FileList object var lectores = new Array(); // los lectores // files is a FileList of File objects. const file = e.target.files[0] you'll need to do: const file = e.target.files[0] || e.dataTransfer.files[0] to handle both events. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. A file can be uploaded with jQuery in 2 ways. FileReader(File) FileReader(File) Constructs a new FileReader on the given file.. FileReader(FileDescriptor) FileReader(FileDescriptor) Construct a new FileReader on the given FileDescriptor fd.. FileReader(IntPtr, JniHandleOwnership) FileReader(IntPtr, JniHandleOwnership) A constructor used when creating managed representations of JNI objects; called by the runtime. The first method is implemented using FormData where a multipart/form-data POST request is sent. The readAsDataURL method is used to read the contents of the specified Blob or File. Next we setup an event listener for the onload event. After that HTML5 filereader api will access the file. Use FileReader to read the contents of a File. However, since Java 11 we can specify the type of character encoding (UTF-8 or UTF-16) in the file as well. File Viewer Lite is a universal file opener that allows you to open over 150 file types your Windows PC. FileReader is used to read the contents of a Blob or File. File Viewer Lite can open PDFs, word processing documents, spreadsheets, and many other common file types … At that time, the result attribute contains the data as a data: URL representing the file's data as a base64 encoded string. That's probably why some of attempts worked, and some didn't - you've just uploaded the file by 2 different ways and only one was working. In the above example, the data in the file are stored using some default character encoding. You can get Files from the HTMLInputElement.files property or the DataTransferItem.getAsFile() method. < input type = " file " > Setup onchange Event Listener with File … Once we have determined that the file type is correct we create a new instance of FileReader. Selecting a file through the local device is pretty straightforward, we just have to call the file input type using the HTML element. File is a Blob that represents a file from the filesystem.