input file文件

原文链接https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
Using the File API, which was added to the DOM in HTML5, it’s now possible for web content to 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 <input>element or by drag and drop.

Accessing selected files(s)
Consider this HTML

<input type="file" id="input">

The File API makes it possible to access a FileList containing File objects representing the files selected by the user.
Accessing one selected file using a classical DOM selector:

const selectedFile=document.getElementById("input").files[0];

• Accessing selected files(s) on a change event
  It is also possible (but not mandatory) to access the FileList through the change event

  <input type="file" id="input" onchange="handleFiles(this.files)">
  

  When the user selects a file, the handleFiles() function gets called with a FileList object containing File objects representing the files selected by the user.
  select multiple files,use multiple attribute

  <input type="file" id="input" multiple onchange="handleFiles(this.files)">
  

• Dynamically adding a change listener
  You need to use EventTarget.addEventListener() to add the change event listener,like this:

  const input=document.getElementById("input");
  input.addEventListener("change",handleFiles,false);
  function handleFiles(){
  	const fileList=this.files
  }
  

  Note that in this case, the handleFiles() function itself is the event handler, unlike previous examples where it was called by an event handler which passed it a parameter.

Getting information about selected file(s)
The FileList object provided by the DOM lists all of the files selected by the user, each specified as a File object. You can determine how many files the user selected by checking the value of the file list’s length attribute:

const numFiles=files.length;

Individual File objects can be retrieved by simply accessing the list as an array:

for(let i=0,numFiles=files.length;i<numFiles;i++){
	const file=files[i]
	...
}

There are three attributes provided by the File object that contain useful information about the file.

• 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 “” if the type couldn’t be determined.

Using hidden file input elements using the click() method
Starting in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), you can hide the admittedly ugly file element and present your own interface for opening the file picker and displaying which file or files the user has selected. You can do this by styling the input element with display:none and calling the click() method on the element.
Consider this HTML:

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<button id="fileSelect">Select some files</button>

The code that handles the click event can look like this:

const fileSelect=document.getElementById("fileSelect"),
	fileElem=document.getElementById("fileElem");
fileSelect.addEventListener("click",function(e){
	if(fileElem){
		fileElem.click()
	}
},false)

when you click the button:

You can style the new button for opening the file picker as your wish.

Using a label element to trigger a hidden file input element
To allow opening the file picker without using JavaScript (the click() method), a <label> element can be used. Note that in this case the input element must not be hidden using display: none (nor visibility: hidden), otherwise the label would not be keyboard-accessible. Use the visually-hidden technique instead.
Consider this HTML:

<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
<label for="fileElem">Select some files</label>

and this CSS:

.visually-hidden{
	position:absolute !important;
	height:1px;
	width:1px;
	overflow:hidden;
	clip:rect(1px,1px,1px,1px);
}
/* Separate rule for compatibility, :focus-within is required on modern Firefox and Chrome */
input.visually-hidden:focus + label {
  outline: thin dotted;
}
input.visually-hidden:focus-within + label {
  outline: thin dotted;
}

There is no need to add JavaScript code to call fileElem.click(). Also in this case you can style the label element as you wish. You need to provide a visual cue for the focus status of the hidden input field on its label, be it an outline as shown above, or background-color or box-shadow. (As of time of writing, Firefox doesn’t show this visual cue for <input type="file"> elements.)

Selecting files using drag and drop
You 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:

let dropbox
dropbox=document.getElementById("dropbox")
dropbox.addEventListener("dragenter",dragenter,false)
dropbox.addEventListener("dragover",dragover,false)
dropbox.addEventListener("drop",drop,false)

In this example, we’re turning the element with the ID dropbox into our drop zone. This is done by adding listeners for the dragenter, dragover, and drop events.

We don’t actually need to do anything with the dragenter and dragover events in our case, so these functions are both simple. They just stop propagation of the event and prevent the default action from occurring:

function dragenter(e){
	e.stopPropagation();
	e.preventDefault();
}
function dragover(e){
	e.stopPropagation();
	e.preventDefault();
}

The real magic happens in the drop() function:

function drop(e){
	e.stopPropagation();
	e.preventDefault();
	const dt=e.dataTransfer;
	const files=dt.files;
	handleFiles(files);
}

Here, we retrieve the dataTransfer field from the event, pull the file list out of it, and then pass that to handleFiles(). From this point on, handling the files is the same whether the user used the input element or drag and drop.

Example:Showing thumbnails of user-selected images
Let’s say you’re developing the next great photo-sharing website and want to use HTML5 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 handleFiles() function below.

function handleFiles(files){
	for(let i=0;i<files.length;i++){
		const file=files[i];
		if(!file.type.startsWith('/image')){continue}
		const img=document.createElement("img")
		img.classList.add("obj")
		img.file=file;
		dropbox.appendChild(img)// Assuming that "dropbox" is the div output where the content will be displayed.
		const reader new FileReader()
		reader.onload=(function(aImg){return function(e){aImg.src=e.target.result}})(img)
		reader.readAsDataURL(file)
	}
}

Here our loop handling the user-selected files looks at each file’s type attribute to see if its MIME type begins with the string “image/”). For each file that is an image, we create a new img element. CSS can be used to establish any pretty borders or shadows and to specify the size of the image, so that doesn’t need to be done here.

Each image has the CSS class obj added to it, making it easy to find in the DOM tree. We also add a file attribute to each image specifying the File for the image; this will let us fetch the images for actual upload later. We use Node.appendChild() to add the new thumbnail to the preview area of our document.

Next, we establish the FileReader to handle asynchronously loading the image and attaching it to the img element. After creating the new FileReader object, we set up its onload function and then call readAsDataURL() to start the read operation in the background. When the entire contents of the image file are loaded, they are converted into a data: URL which is passed to the onload callback. Our implementation of this routine sets the img element’s src attribute to the loaded image which results in the image appearing in the thumbnail on the user’s screen.

Using objects URLs
Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) introduces support for the DOM window.URL.createObjectURL() and window.URL.revokeObjectURL() methods. These let you create simple URL strings that can be used to reference any data that can be referred to using a DOM File object, including local files on the user’s computer.
When you have a File object you’d like to reference by URL from HTML, you can create an object URL for it like this:

const objectURL=window.URL.createObjectURL(fileobj)

The object URL is a string identifying the File object. Each time you call window.URL.createObjectURL(), a unique object URL is created even if you’ve created an object URL for that file already. Each of these must be released. While they are released automatically when the document is unloaded, if your page uses them dynamically you should release them explicitly by calling window.URL.revokeObjectURL():

window.URL.revokeObjectURL(objectURL)

Example:Using object URLs to display images
This 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:

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>
<div id="fileList"><p>No files selected</p></div>

This establishes our file element as well as a link that invokes the file picker (since we keep the file input hidden to prevent that less-than-attractive user interface from being displayed). This is explained in the section Using hidden file input elements using the click() method, as is the method that invokes the file picker.
The handleFiles() method follows:

window.URL=window.URL||window.webkitURL
const fileSelect = document.getElementById("fileSelect"),
    fileElem = document.getElementById("fileElem"),
    fileList = document.getElementById("fileList");
fileSelect.addEventListener("click",function(e){
	if(fileElem){
		fileElem.click()
	}
	e.preventDefault();// prevent navigation to "#"
},false)
function handleFiles(files){
	if(!files.length){
		fileList.innerHTML="<p>No files selected</p>"
	}else{
		fileList.innerHTML=""
		const list=document.createElement("ul")
		fileList.appendChild(list)
		for(let i=0;i<files.length;i++){
			const li=document.createElement("li")
			list.appendChild(li)
			
			const img=document.createElement("img")
			img.src=window.URL.createObjectURL(files[i])
			img.height=60
			img.onload=function(){
				window.URL.revokeObjectURL(this.src);
			}
			li.appendChild(img)
			const info=document.createElement("span")
			info.innerHTML=files[i].name+":"+files[i].size+"bytes"
			li.appendChild(info)
		}
	}
}

This starts by fetching the URL of the

with the ID fileList. This is the block into which we’ll insert our file list, including thumbnails.

If the FileList object passed to handleFiles() is null, we simply set the inner HTML of the block to display “No files selected!”. Otherwise, we start building our file list, as follows:

1. A new unordered list (<ul>) element is created.
2. The new list element is inserted into the <div> block by calling
   its Node.appendChild() method.
3. For each File in the FileList represented by files:
   Create a new list item (<li>) element and insert it into the list.
   Create a new image (<img>) element.
   Set the image’s source to a new object URL representing the file, using -+window.URL.createObjectURL() to create the blob URL.
   Set the image’s height to 60 pixels.
   Set up the image’s load event handler to release the object URL since it’s no longer needed once the image has been loaded. This is done by calling the window.URL.revokeObjectURL() method and passing in the object URL string as specified by img.src.
   Append the new list item to the list.