Form input type file javascript

File и FileReader

Объект File наследуется от объекта Blob и обладает возможностями по взаимодействию с файловой системой.

Есть два способа его получить.

Во-первых, есть конструктор, похожий на Blob :

new File(fileParts, fileName, [options])

• fileParts – массив значений Blob / BufferSource /строки.
• fileName – имя файла, строка.
• options – необязательный объект со свойством:
  • lastModified – дата последнего изменения в формате таймстамп (целое число).

  Во-вторых, чаще всего мы получаем файл из или через перетаскивание с помощью мыши, или из других интерфейсов браузера. В этом случае файл получает эту информацию из ОС.

  Так как File наследует от Blob , у объектов File есть те же свойства плюс:

  В этом примере мы получаем объект File из :

  Через можно выбрать несколько файлов, поэтому input.files – псевдомассив выбранных файлов. Здесь у нас только один файл, поэтому мы просто берём input.files[0] .

  FileReader

  FileReader объект, цель которого читать данные из Blob (и, следовательно, из File тоже).

  Данные передаются при помощи событий, так как чтение с диска может занять время.

  let reader = new FileReader(); // без аргументов

  • readAsArrayBuffer(blob) – считать данные как ArrayBuffer
  • readAsText(blob, [encoding]) – считать данные как строку (кодировка по умолчанию: utf-8 )
  • readAsDataURL(blob) – считать данные как base64-кодированный URL.
  • abort() – отменить операцию.

  Выбор метода для чтения зависит от того, какой формат мы предпочитаем, как мы хотим далее использовать данные.

  • readAsArrayBuffer – для бинарных файлов, для низкоуровневой побайтовой работы с бинарными данными. Для высокоуровневых операций у File есть свои методы, унаследованные от Blob , например, slice , мы можем вызвать их напрямую.
  • readAsText – для текстовых файлов, когда мы хотим получить строку.
  • readAsDataURL – когда мы хотим использовать данные в src для img или другого тега. Есть альтернатива – можно не читать файл, а вызвать URL.createObjectURL(file) , детали в главе Blob.

  В процессе чтения происходят следующие события:

  • loadstart – чтение начато.
  • progress – срабатывает во время чтения данных.
  • load – нет ошибок, чтение окончено.
  • abort – вызван abort() .
  • error – произошла ошибка.
  • loadend – чтение завершено (успешно или нет).

  Когда чтение закончено, мы сможем получить доступ к его результату следующим образом:

  Наиболее часто используемые события – это, конечно же, load и error .

  Как упоминалось в главе Blob, FileReader работает для любых объектов Blob, а не только для файлов.

  Поэтому мы можем использовать его для преобразования Blob в другой формат:

  • readAsArrayBuffer(blob) – в ArrayBuffer ,
  • readAsText(blob, [encoding]) – в строку (альтернатива TextDecoder ),
  • readAsDataURL(blob) – в формат base64-кодированного URL.

  Для веб-воркеров доступен синхронный вариант FileReader , именуемый FileReaderSync.

  Его методы считывания read* не генерируют события, а возвращают результат, как это делают обычные функции.

  Но это только внутри веб-воркера, поскольку задержки в синхронных вызовах, которые возможны при чтении из файла, в веб-воркерах менее важны. Они не влияют на страницу.

  Итого

  File объекты наследуют от Blob .

  Помимо методов и свойств Blob , объекты File также имеют свойства name и lastModified плюс внутреннюю возможность чтения из файловой системы. Обычно мы получаем объекты File из пользовательского ввода, например, через или перетаскиванием с помощью мыши, в событии dragend .

  Объекты FileReader могут читать из файла или Blob в одном из трёх форматов:

  • Строка ( readAsText ).
  • ArrayBuffer ( readAsArrayBuffer ).
  • URL в формате base64 ( readAsDataURL ).

  Однако, во многих случаях нам не нужно читать содержимое файла. Как и в случае с Blob, мы можем создать короткий URL с помощью URL.createObjectURL(file) и использовать его в теге или . Таким образом, файл может быть загружен или показан в виде изображения, как часть canvas и т.д.

  А если мы собираемся отправить File по сети, то это также легко, поскольку в сетевые методы, такие как XMLHttpRequest или fetch , встроена возможность отсылки File .

  Источник

  How to Upload Files with JavaScript

  

  Austin Gil

  

  I recently published a tutorial showing how to upload files with HTML. That’s great, but it’s a bit limited to using the native browser form behavior, which causes the page to refresh.

  In this tutorial, I want to show you how to do the same thing with JavaScript to avoid the page refresh. That way, you can have the same functionality, but with better user experience.

  How to Set Up an Event Handler

  Let’s say you have an HTML form that looks like this:

  With HTML, to access a file on the user’s device, we have to use an with the “file” type . And in order to create the HTTP request to upload the file, we have to use a element.

  When dealing with JavaScript, the first part is still true. We still need the file input to access the files on the device. But browsers have a Fetch API that we can use to make HTTP requests without forms.

  I still like to include a form because:

  1. Progressive enhancement: If JavaScript fails for whatever reason, the HTML form will still work.
  2. I’m lazy: The form will actually make my work easier later on, as we’ll see.

  With that in mind, for JavaScript to submit this form, I’ll set up a “submit” event handler.

  const form = document.querySelector('form'); form.addEventListener('submit', handleSubmit); /** @param event */ function handleSubmit(event) < // The rest of the logic will go here. >

  Throughout the rest of this article, we’ll only be looking at the logic within the event handler function, handleSubmit .

  How to Prepare the HTTP Request

  The first thing I need to do in this submit handler is call the event’s preventDefault method to stop the browser from reloading the page to submit the form. I like to put this at the end of the event handler so that if there is an exception thrown within the body of this function, preventDefault will not be called, and the browser will fall back to the default behavior.

  /** @param event */ function handleSubmit(event) < // Any JS that could fail goes here event.preventDefault(); >

  Next, we’ll want to construct the HTTP request using the Fetch API. The Fetch API expects the first argument to be a URL, and a second, optional argument as an Object.

  We can get the URL from the form’s action property. It’s available on any form DOM node which we can access using the event’s currentTarget property. If the action is not defined in the HTML, it will default to the browser’s current URL.

  /** @param event */ function handleSubmit(event)

  Relying on the HTML to define the URL makes it more declarative, keeps our event handler reusable, and our JavaScript bundles smaller. It also maintains functionality if the JavaScript fails.

  By default, Fetch sends HTTP requests using the GET method, but to upload a file, we need to use a POST method. We can change the method using fetch ‘s optional second argument. I’ll create a variable for that object and assign the method property, but once again, I’ll grab the value from the form’s method attribute in the HTML.

  const url = new URL(form.action); /** @type [1]> */ const fetchOptions = < method: form.method, >; fetch(url, fetchOptions);

  Now the only missing piece is actually including the payload in the body of the request.

  How to Add the Request Body

  If you’ve ever created a Fetch request in the past, you may have included the body as a JSON string or a URLSearchParams object. Unfortunately, neither of those will work to send a file, as they don’t have access to the binary file contents.

  Fortunately, there is the FormData browser API. We can use it to construct the request body from the form DOM node. And conveniently, when we do so, it even sets the request’s Content-Type header to multipart/form-data – also a necessary step to transmit the binary data.

  const url = new URL(form.action); const formData = new FormData(form); /** @type [1]> */ const fetchOptions = < method: form.method, body: formData, >; fetch(url, fetchOptions);

  That’s really the bare minimum needed to upload files with JavaScript. Let’s do a little recap:

  1. Access to the file system using a file type input.
  2. Construct an HTTP request using the Fetch (or XMLHttpRequest ) API.
  3. Set the request method to POST .
  4. Include the file in the request body.
  5. Set the HTTP Content-Type header to multipart/form-data .

  Today we looked at a convenient way of doing that, using an HTML form element with a submit event handler, and using a FormData object in the body of the request. The current handleSumit function should look like this:

  /** @param event */ function handleSubmit(event) < const url = new URL(form.action); const formData = new FormData(form); /** @type [1]> */ const fetchOptions = < method: form.method, body: formData, >; fetch(url, fetchOptions); event.preventDefault(); >

  Unfortunately, the current submit handler is not very reusable. Every request will include a body set to a FormData object and a “ Content-Type ” header set to multipart/form-data . This is too brittle. Bodies are not allowed in GET requests, and we may want to support different content types in other POST requests.

  How to Make it Reusable

  We can make our code more robust to handle GET and POST requests, and send the appropriate Content-Type header. We’ll do so by creating a URLSearchParams object in addition to the FormData , and running some logic based on whether the request method should be POST or GET . I’ll try to lay out the logic below:

  Is the request using a POST method?

  — Yes: is the form’s enctype attribute multipart/form-data ?

  — — Yes: set the body of the request to the FormData object. The browser will automatically set the “ Content-Type ” header to multipart/form-data .

  — — No: set the body of the request to the URLSearchParams object. The browser will automatically set the “ Content-Type ” header to application/x-www-form-urlencoded .

  — No: We can assume it’s a GET request. Modify the URL to include the data as query string parameters.

  The refactored solution looks like:

  /** @param event */ function handleSubmit(event) < /** @type */ const form = event.currentTarget; const url = new URL(form.action); const formData = new FormData(form); const searchParams = new URLSearchParams(formData); /** @type [1]> */ const fetchOptions = < method: form.method, >; if (form.method.toLowerCase() === 'post') < if (form.enctype === 'multipart/form-data') < fetchOptions.body = formData; >else < fetchOptions.body = searchParams; >> else < url.search = searchParams; >fetch(url, fetchOptions); event.preventDefault(); >

  I really like this solution for a number of reasons:

  • It can be used for any form.
  • It relies on the underlying HTML as the declarative source of configuration.
  • The HTTP request behaves the same as with an HTML form. This follows the principle of progressive enhancement, so file upload works the same when JavaScript is working properly or when it fails.

  Thank you so much for reading. I hope you found this useful. If you liked this article, and want to support me, the best ways to do so are to share it, sign up for my newsletter, and follow me on Twitter.

  Источник

  Читайте также:  Файл имеющий расширение html