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

In the current web development will inevitably do a picture preview function, for example, in the case of uploading pictures, a very simple way is to tell the picture uploaded to the server, then the file URL back, and then asynchronously through the URL to load the image just uploaded, to achieve a preview of the picture, It is obvious that in this process two Web requests, one send file, one download file, and finally this file if the client is deleted (Cancel upload, discard this upload), this whole process is wasted. We want to be able to preview images before they are uploaded, which avoids unnecessary network requests and time waits. Here's what's going on around this topic.

Local picture preview local picture preview in IE (accessed as a local file)

In IE can be very convenient to achieve a local page picture preview, ie <input type= "file" id= "File_upload" > in the File object in the Value property, stored is the full path of the files to be uploaded, In IE, it is only possible to use this full path as the SRC attribute of an Image object to preview the uploaded image in this image object.

In IE, there are the following ways:

var Url;var fileobj = document.getElementById (SourceID); Fileobj.select (); url = Document.selection.createRange (). Text ;

Or

var url = document.getElementById (SourceID). value;

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

Local image previews for Firefox and Chrome

Use the following methods in Firefox and Chrome:

var url = 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 Getasdataurl of the Firefox file object has been deprecated after Firefox 7.0, and the Firefox DOM file may be due to the relevant definition in the HTML5 standard.

Server-side picture preview local picture preview in IE (accessed as a server-side URL)

The local preview method mentioned above, in the form of a server-side URL without a preview effect, requires the use of the following filter form.

function Previewimg (imgfile) {     var newpreview = document.getElementById ("Newpreview");     var imgdiv = document.createelement ("div");     Document.body.appendChild (imgdiv);     ImgDiv.style.width = "118px";     ImgDiv.style.height = "127px";     Imgdiv.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader (Sizingmethod = scale)";     ImgDiv.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = imgfile.value;     Newpreview.appendchild (IMGDIV);}

The above implementations can run at IE7, 8, 9, and not at IE10, 11. H2. Local picture previews of Firefox and Chrome are used in Firefox and Chrome as follows:

var url = window. Url.createobjecturl (document.getElementById (SourceID). Files[0])

The resulting value gives the IMG src a picture preview. You may also see the following ways:

var url = obj.files.item (0). Getasdataurl ();

This method of using the Getasdataurl of the Firefox file object has been deprecated after Firefox 7.0, and the Firefox DOM file may be due to the relevant definition in the HTML5 standard.

A browser-compatible implementation (compatible with IE7, 8, 9, 10, 11,firefox,chrome) basics

• In Chrome, window. URLs and Window.webkiturl are present
• In Firefox, only window.url exist
• In IE11 (Edge), 10 is only window. URL exists
• window does not exist in IE7, 8, 9. Url
• The full path of the file can be obtained through the FileObject Value property in IE
• Can't get the full path of fileobject in Chrome, get a fake path
• The path is not available in Firefox and a filename is obtained
• Unable to get the files property to FileObject in IE7, 8, 9

Realize

We used to follow the useragent, by judging ie, or chrome, or Firefox, or Safari, opera, etc. to correspond to the support code, now this way may need to be adjusted, the File API is the HTML5 of the canonical features, Therefore, the browser can be roughly divided into two broad categories, one is to support the HTML5 class, and the other is not supported.

Resources
 
 

  
  

  
JavaScript image upload Preview effect
  
  

  
Compatible with IE8, Firefox's local image preview + zoom
  
  

  
Image upload Preview (ie using filters)
  
  

  
[[Turn] very simple JS implementation preview image before uploading (compatible with IE8) |http://www.cnblogs.com/seasons1987/archive/2012/11/16/2773548.html]
  
  

  
Image upload Preview (support Ie,chrome,firefox)
  
  

  
JS Magic Hall of the actual combat: pure front-end picture preview
  
  

  
About Css-filter filter tips in IE
  
  

  
BT9011: Only IE supports CSS Filter
  
  

  
CSS Filter Detailed
  
  

  
Proficient in CSS Filters (instance parsing)
  
  

  
Have to collect------ie in the css-filter filter Small knowledge Daquan
  
  

  
MSDN Filters and Transitions
  
  

  
Visual Filters and Transitions Reference
  
  

  
JS Magic Hall: Data URI Scheme Introduction
  
  

  
Using files from Web applications
  
  

  
How to use files in a Web application
  
  

  
[[Translate]JavaScript file Operations (4)-url object |http://www.iunbug.com/archives/2012/06/05/254.html]
  
  

  
Window.url.createobjecturl compatible with multiple browsers (IE,GOOGLE,360,SAFARI,FIREFOX)
  
  

  
Microsoft related Product API Reference
  
  

  
Windows Internet Explorer API Reference
  
  

  
Developer Guides (by IE version)
  
  

  
Window. URL Reference
  
  

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