图片上传预览的前端实现方法

Example

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

Javascript

function previewFile() {
	var preview = document.querySelector('img');
	var file    = document.querySelector('input[type=file]').files[0];
	var reader  = new FileReader();

	reader.addEventListener("load", function () {
		preview.src = reader.result;
	}, false);

	if (file) {
		reader.readAsDataURL(file);
	}
}

Example reading multiple files

HTML

<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>

Javascript

function previewFiles() {

  	var preview = document.querySelector('#preview');
  	var files   = document.querySelector('input[type=file]').files;

  	function readAndPreview(file) {

    	// Make sure `file.name` matches our extensions criteria
    	if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      		var reader = new FileReader();

      		reader.addEventListener("load", function () {
	        	var image = new Image();
	        	image.height = 100;
	        	image.title = file.name;
	        	image.src = this.result;
	        	preview.appendChild( image );
	      	}, false);

      		reader.readAsDataURL(file);
		}

	}

  	if (files) {
		[].forEach.call(files, readAndPreview);
  	}

}