Base64 string + Flash for thumbnail Preview

In similar applications such as image uploading, you often need to provide the thumbnail preview function. Due to the enhanced security of various browsers, the development difficulty of this function is greatly increased.

The most common method is to first upload an image to the server and display the thumbnail by returning the URL of the image. In this way, if you select an incorrect image, it will cause a great waste of resources.

Here I would like to boast that Flash: Flash Player 10 + supports local image Preview!

But in some cases, I just want to preview the thumbnail in the html Tag, instead of in the Flash. What should I do?

So we thought of Base64 again! Let's take a brief look at Base64:

Base64 is one of the most common encoding methods used to transmit 8-bit code on the network. Base64 is mainly not encrypted. It is used to convert some binary numbers into common characters for network transmission. Some binary characters are controlled characters in the transmission protocol, so they cannot be directly transferred and need to be converted. The most common use is as the transmission code of the email or WebService attachment...

 

InFirefox,Chrome,Safari,IE8+ Images can be embedded using the following methods in browsers:

1.(X) HTML Image Embedding Example

  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..."/>

2.CSS Image Embedding Example

.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}

 

So we have another idea: use Flash to read the local image and convert it into a Base64 string and send it to js to dynamically display the thumbnail.

Here is the Demo, which must be viewed in a non-IE or IE8 + browser.

 

Download the source code of this article here

 

References:

Http://www.greywyvern.com/code/php/binary2base64

Http://bbs.9ria.com/viewthread.php? Tid = 47520 & from = favorites