Front-end picture preview, pre-upload preview, compatible with IE7, 8, 9, 10, 11,firefox,chrome

In today's web development, it is inevitable to do a picture preview of the function,

For example, in the case of uploading pictures, a very simple way is to tell the picture uploaded to the server, then return the URL of the file, and then asynchronously through the URL to load the image just uploaded, to achieve a preview of the picture,

Obviously in this process two Web requests, one send file, one download file, to the last this file if the client is deleted (Cancel upload, discard this upload),

The whole process was in vain. We want to be able to preview images before they are uploaded, which avoids unnecessary network requests and time waits.

In IE, there are the following ways

varurl;varfileobj = document.getElementById(sourceId);fileobj.select();url = document.selection.createRange().text;

Or

varurl = document.getElementById(sourceId).value;

two ways to get to the path directly to the IMG SRC can be a preview of the local picture (you can add file:/// protocol, the same effect), both of which are valid for IE7, 8, 9, 10, 11.

Use the following methods in Firefox and Chrome:

varurl = window.URL.createObjectURL(document.getElementById(sourceId).files[0])

The resulting value gives the IMG src a picture preview. You may also see the following way:var url = obj.files.item (0). Getasdataurl ();
This method of using the Firefox file object Getasdataurl has been deprecated after Firefox 7.0, The Firefox DOM Filemay be due to a related definition in the HTML5 standard.

Link

Front-end picture preview, pre-upload preview, compatible with IE7, 8, 9, 10, 11,firefox,chrome