1, URL.createObjectURL () static method creates a DOMString, its URL object representing the parameters. Its life cycle and create a window in the URL of the document bindings.
2, in each call createObjectURL() when the method will create a new URL object, even if you have been using the same object as a parameter to create too. When these URL object is no longer needed, each object must call URL.revokeObjectURL() to release method. The browser will automatically release them when the document exit, but for best performance and memory usage, you should take the initiative to relieve them in a safe opportunity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<Title> Image Preview </ title>
</head>
<body>
<input type="file" id="file" multiple>
<Div id = "preview"> Image Preview </ div>
<script>
var preview = document.querySelector('#preview');
var File = document.querySelector ( '# file');
oFile.onchange = function () {
var url = window.URL.createObjectURL(oFile.files[0]);
// Create a preview image
was img = new Image ();
img.src = url;
img.style.width = "80px";
img.style.height = "80px";
// insert preview image
preview.appendChild(img);
}
</script>
</body>
</html>