Hướng dẫn dùng versus用法 JavaScript
Using the File API, web content can ask the user to select local files and then read the contents of those files. This selection can be done by either using an HTML Consider this HTML: The File API makes it possible to access a The Accessing the first selected file using a classical DOM selector:
Accessing selected file(s) on a change eventIt is also possible (but not mandatory) to access the
Getting information about selected file(s)The
Individual
This loop iterates over all the files in the file list. There are three attributes provided by the name The file's name as a read-only string. This is just the file name, and does not include any path information. size The size of the file in bytes as a read-only 64-bit integer. type The MIME type of the file as a read-only string or Example: Showing file(s) sizeThe following example shows a possible use of the
You can hide the admittedly ugly file
Consider this HTML:
The code that handles the
You can style the new button for opening the file picker as you wish. To allow opening the file picker without using JavaScript (the click() method), a
Consider this HTML:
and this CSS:
There is no need to add JavaScript code to call Selecting files using drag and dropYou can also let the user drag and drop files into your web application. The first step is to establish a drop zone. Exactly what part of your content will accept drops may vary depending on the design of your application, but making an element receive drop events is easy:
In this example, we're turning the element with the ID We don't actually need to do anything with the
The real magic happens in the
Here, we retrieve the Example: Showing thumbnails of user-selected imagesLet's say you're developing the next great photo-sharing website and want to use HTML to display thumbnail previews of images before the user actually uploads them. You can establish your input element or drop zone as discussed previously and have them call a function such as the
Here our loop handling the
user-selected files looks at each file's Each image has the CSS class Next, we establish the Using object URLsThe DOM When you have a
The object URL is a string identifying the
Example: Using object URLs to display imagesThis example uses object URLs to display image thumbnails. In addition, it displays other file information including their names and sizes. The HTML that presents the interface looks like this:
This establishes our file The
This starts by fetching the URL of the If the Here is a live demo of the code above: Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily. Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class Line 2 fetches a The The Before actually transferring the data, several preparatory steps are taken: This example, which uses PHP on the server side and JavaScript on the client side, demonstrates asynchronous uploading of a file. Object URLs can be used for other things than just images! They can be used to
display embedded PDF files or any other resources that can be displayed by the browser. In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference And here is the change of the You can manipulate files of other formats the same way. Here is how to
preview uploaded video: |