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

Source: Internet
Author: User
Tags deprecated file url

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
 
 
  1. JavaScript image upload Preview effect
  2. Compatible with IE8, Firefox's local image preview + zoom
  3. Image upload Preview (ie using filters)
  4. [[Turn] very simple JS implementation preview image before uploading (compatible with IE8) |http://www.cnblogs.com/seasons1987/archive/2012/11/16/2773548.html]
  5. Image upload Preview (support Ie,chrome,firefox)
  6. JS Magic Hall of the actual combat: pure front-end picture preview
  7. About Css-filter filter tips in IE
  8. BT9011: Only IE supports CSS Filter
  9. CSS Filter Detailed
  10. Proficient in CSS Filters (instance parsing)
  11. Have to collect------ie in the css-filter filter Small knowledge Daquan
  12. MSDN Filters and Transitions
  13. Visual Filters and Transitions Reference
  14. JS Magic Hall: Data URI Scheme Introduction
  15. Using files from Web applications
  16. How to use files in a Web application
  17. [[Translate]JavaScript file Operations (4)-url object |http://www.iunbug.com/archives/2012/06/05/254.html]
  18. Window.url.createobjecturl compatible with multiple browsers (IE,GOOGLE,360,SAFARI,FIREFOX)
  19. Microsoft related Product API Reference
  20. Windows Internet Explorer API Reference
  21. Developer Guides (by IE version)
  22. Window. URL Reference
  23. Firefox API Reference

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.