A long time ago, I met such a demand in my work. At that time, it was also a long time entanglement, but also google did not meet the appropriate demo. Today, I specially studied this problem, so I made a simple demo to realize the real-time preview effect of uploading pictures locally. Its standard browsers (firefox,chrome, IE10 and other browsers) use HTML5 content to achieve instant image preview effect. The browser below IE10 uses filters to solve the problem of picture display. Before looking at the code, let's look at the following points:

FileReader object in HTML5: FileReader object mainly reads files into memory and reads data in files. So far, Firefox 3.6 + chrome 6 + Safari 5.2 + Opera 11 + and IE10 browsers support FileReader objects. It has the following five methods:

1. readBinaryString

2. readAsText

3. ReadAs Data URL reads data from an object or file as a string of data URLs, that is, it reads data directly into a page in the form of a URL address in a special format.

4. readAsArrayBuffer

5. abort.

And now we are going to use the third, so explain below, other specific can see the relevant information, here is not much explanation.

IE: document.selection is the data interpretation as follows:

  The selection object represents the currently activated selection, that is, the highlighted text block, and/or other elements in the document that the user can perform certain actions. 
  The typical use of selection objects is as user input to identify which part of the document is being processed or output to the user as a result of an operation. 

      Both users and scripts can create the selection. The user creates the selection by dragging part of the document. The script creates a selection by calling the select method on a text area or similar object. To get the current selection, apply the selection keyword to the document object. To perform operations on the selected area, first create a text area object from the selected area using the createRange method. 
      A document can only have one selection at a time. The type of selection determines whether it is empty or contains text and/or element blocks. Although the empty selection contains nothing, you can still use it as a location marker in the document.

Below is the DEMO link in JSFiddle as follows:

To see the effect, please click on me!

The following HTML code is as follows:

<form enctype="multipart/form-data" name="form1">
    <input id="f" type="file" name="f" onchange="change()" />
    <div class="upload">Upload pictures</div>
    <p>preview:</p>
    <p>
        <img id="preview" alt="" name="pic" />
    </p>
</form>

The JS code is as follows:

function change() {
    var pic = document.getElementById("preview"),
        file = document.getElementById("f");

    var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();

     // gif is temporarily unavailable in IE browser
     if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
         alert("The format of the picture must be png perhaps jpg perhaps jpeg Format!"); 
         return;
     }
     var isIE = navigator.userAgent.match(/MSIE/)!= null,
         isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;

     if(isIE) {
        file.select();
        var reallocalpath = document.selection.createRange().text;

        // IE6 browser sets the src of img as the local path to display pictures directly
         if (isIE6) {
            pic.src = reallocalpath;
         }else {
            // The src of the non-IE6 version of IE which directly sets img can not display local pictures due to security problems, but it can be achieved through filters.
             pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
             // Setting src of img to base 64 encoding transparent picture cancels display of browser default picture
             pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
         }
     }else {
        html5Reader(file);
     }
}

 function html5Reader(file){
     var file = file.files[0];
     var reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function(e){
         var pic = document.getElementById("preview");
         pic.src=this.result;
     }
 }

Local Demo Download