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

Source: Internet
Author: User

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

Related Article

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.