Shulou(Shulou.com)06/03 Report--

This article shows you how to use JavaScript object URLs for image, audio and video processing, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Many Web applications need to process file input at the front end or upload files to the back end.

Use object URLs

We can call URL.createObjectURL to create a URL string object from the file object as follows.

Const objectURL = window.URL.createObjectURL (fileObj)

We can then call revokeURL on the URL string object to free the URL resources from memory:

URL.revokeObjectURL (objectURL)

Use object URLs to display pictures

For example, we can use the createObjectURL method to display the selected image file in the img element, as shown below.

First, let's write the following HTML:

Then, we can write the following code to listen for the change event of the file input, and then use createObjectURL to set the src property of the img element, as shown below:

Const fileInput = document.querySelector ('input'); const img = document.querySelector (' img'); fileInput.onchange = () = > {const file = fileInput.files [0]; img.src = URL.createObjectURL (file); img.onload = () = > {URL.revokeObjectURL (img.src);}}

In the above code, we call createObjectURL on the selected file object file to create a URL that can be set to the value of the src attribute. Then, when the image is loaded, we call revokeObjectURL to clear the resources used to create the URL.

Use object URLs to display PDF

We can also use object URL to display PDF. We use the same crateObjectURL method, but set it to the URL of iframe instead of the img element.

For example, we can write the following HTML:

We can then set the src property to the iframe of the PDF object URL, as follows:

Const fileInput = document.querySelector ('input'); const iframe = document.querySelector (' iframe'); fileInput.onchange = () = > {const file = fileInput.files [0]; const objUrl = URL.createObjectURL (file); iframe.setAttribute ('src', objUrl); URL.revokeObjectURL (objUrl);}

We use createObjectURL and the uploaded PDF file to create the ObjectURL string. Then we can set the src property for it. The PDF is then displayed in the iframe of the Firefox.

Using object URLs with other file types

Object URL can also be used with other file types. For example, we can select a video file and play it by writing the following code. First, let's write the following HTML code:

Then, to play the video file selected from the file input, we write:

Const fileInput = document.querySelector ('input'); const video = document.querySelector (' video'); fileInput.onchange = async () = > {const file = fileInput.files [0]; const objUrl = URL.createObjectURL (file); video.src = objUrl; await video.play (); URL.revokeObjectURL (objUrl);}

In the above code, we have an asynchronous function that creates an Object URL from the selected video file. Then, set Object URL to the src attribute of the video element.

Then, we call the video play to play the video. The play method returns a Promise, so we must add an await to wait for the Promise to resolve.

When this is done, we can call revokeObjectURL on the ObjectURL to release the resources.

We can create an Object URL and set it to the src attribute of various elements to display or play them. In most browsers, it can handle images, audio and video.

The above content is how to use JavaScript object URLs for image, audio and video processing. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.