JavaScript Image upload Preview effect

Image upload Preview is a technique for previewing images locally before uploading them.
Enables users to view pictures immediately after they select them without uploading the server to improve the user experience.
But as the security of the browser improves, it becomes more and more difficult to upload previews of images.
However, the wisdom of the masses is unlimited, there are many flexible or advanced methods on the Internet to achieve.
For example Ie7/ie8 's filter preview method, Firefox 3 's Getasdataurl method.
But there's still no way to do a local preview in opera, Safari, or Chrome, only in the background to support previews.
After studying a variety of preview methods, as a summary, wrote this program, to share with you.
The last time to write a simple no-refresh file upload system is originally intended to achieve this image preview effect.
Compatible: IE6/7/8, Firefox 3.5.5
Background support is also compatible with: Opera 10.10, Safari 4.0.4, Chrome 3.0

Effect Preview

Select File	Preview Map

Select Picture:
file path Preview Map Operation

PS: Compatible with opera, Safari and chrome require background support, please download the example test.

Program Description

Basic principle

The image preview consists of two parts: get the image data from the file Form control, and display the preview image based on the data.
The File and IMG properties of the program are used to hold the file control and display the preview image of the container, and IMG must also be an IMG element.

There are several ways to preview the program:
Simple mode: Directly from the file's value to get the picture path to display the preview, applicable to IE6;
Filter mode: Get the picture path of file through selection, then use filter to display preview, apply to IE7/8;
Domfile mode: Call the file's Getasdataurl method to get the data URI to display a preview, applicable to FF3;
Remote mode: The last method, the file submitted to the background processing and return the picture data to display the preview, all applicable.

The Mode property is automatically set according to the browser when the program is defined:

Imagepreview.mode = $ $B. IE7 | | $ $B. IE8? "Filter":
$ $B. Firefox? "Domfile":
$ $B. Opera | | $ $B. Chrome | | $ $B. Safari? "Remote": "Simple";

If the ability to detect will be more troublesome, so only with the browser detection.
Since the default mode of the browser will not change, this value will be saved to the function property as a common property.
Ps:ie6 can also use the filter mode, but it has a better simple mode.

"Get Data"

When you call the preview method, you execute the previewing program:

if (This.file && false!== This.oncheck ()) {
This._preview (This._getdata ());
}

After passing the detection, call _getdata to get the data and enter the next step as the _preview parameter.

The _getdata Data acquisition program is set according to mode when the program is initialized:

This._getdata = This._getdatafun (Opt.mode);

The default value for MODE is Imagepreview.mode, or it can be customized in optional parameters.
Due to compatibility issues, you should generally keep the default values unless you are using fully compatible remote mode.

In _getdatafun, the data acquisition program is returned according to mode:

Code

Different modes have different data acquisition programs:
Filter Data Acquisition Program:

This.file.select ();
try{
Return Document.selection.createRange (). text;
} finally {Document.selection.empty ();}

Generally used in IE7/8, after the file control select and then the Selection object to get the files local path.
At this point the file control cannot be hidden, otherwise it cannot be selected, but the general choice of files will definitely be select.
You really want to hide it or you can hide it after you get the data.

Domfile Data Acquisition Program:

return This.file.files[0].getasdataurl ();

Using Getasdataurl to get data from the file control, this method is temporarily supported only by FF3.

Remote Data Acquisition Program:

This._setupload ();
This._upload && this._upload.upload ();

Upload the file object with _upload to submit the data to the background, according to the returned data to display again.
This method does not belong to the local preview, there is no way to approach.

General Data Acquisition Program:

return this.file.value;

The most primitive method, now only IE6, is also supported to get the local path directly from the value of file.

Once the data has been obtained, it is processed as a parameter of the _preview Preview Program:

if (!! Data && Data!== this._data) {
This._data = data; This._show ();
}

First, the case of NULL or the same value is excluded, and then the _show program is performed to display a preview, where the _data property is used to save the current picture data.
The image may set a large SRC value when using the data URI, and an "invalid pointer" error will occur when the IE8 gets a large src value.
Saving this value with the _data property avoids triggering the error from the SRC value.

The Remote Data acquisition program does not return a value because it needs to wait for the returned data to be automatically excluded in _preview.

"Show preview"

The _show Preview Display program is set according to mode when the program is initialized:

This._show = Opt.mode!== "filter"? This._simpleshow:this._filtershow;

In addition to the filter mode, the preview image is displayed using the _simpleshow display program.
The _simplepreload method is called first to set the general Preload image object:

Code

The preloaded image object is stored in the _preload attribute, which is used primarily to determine if the image can be loaded successfully and to obtain the original size of the picture.
Using an Image object to implement these features is sufficient.
Perform a _imgshow display preview in onload and error handling in OnError.
PS:FF, Chrome, and Safari picture objects also have naturalheight and Naturalwidth properties to get the original dimensions of the picture, even if the picture size has been modified.

Note here that IE6/7 's GIF image loads the bug and tests the following code:

Code

The general picture does not repeat once the onload is executed once, but the Ie6/7 GIF performs the onload once every time the loop is played.
PS:IE8 also has the same problem in non-standard (strange) mode.
It is possible to determine if complete is false in the onload to determine if the load is repeated.
PS: In addition to IE, the other browsers in the OnLoad complete is already true.
The problem is that this complete is still true when you select another picture, which makes no sense.
So I had to reset the onload to null in the onload and reset the onload at each file selection.

Then set the _preload src preloaded image and perform a _imgshow display preview if the preload is successful.
It is important to note that the setting of SRC is after the setting of Onload/onerror, otherwise it will not trigger the event if it is loaded before the setting is completed.

_imgshow requires three parameters, including the SRC value to preview the image, the original width of the picture, and the original height of the picture.
In _imgshow, first set the size of the preview image:

Code

The key here is to get the ratio scale value, and if the custom ratio is greater than 0, use the custom scale directly, otherwise it will be calculated automatically based on the parameter.
The automatic calculation first ensures that the maximum maxwidth width and maxheight maximum height are greater than or equal to 0.
Then the original width and height of the "/" operation to get the proportion, if the ratio of 0 means no limit, then the scale is automatically changed to 1.
Finally, the smaller proportion to calculate, the program set the maximum ratio of 1, so that does not automatically enlarge the picture.
Of course, the calculation of proportions can be modified as needed.
The Ps:style priority is higher than the attribute (width/height), so it is set with style.

The last set of IMG SRC can be implemented in preview.

"Remote Mode"

The remote mode submits the file control to the background and displays the picture with the returned data.
The biggest difference between it and other patterns is the part that gets the data.

In the _remotedata Remote Data acquisition program, _setupload is called to set the upload file object.
If the action is set and the Quickupload function exists, an upload file object is instantiated to be saved to _upload:

Code

The quickupload used here is a simple no-refresh file upload program.
Set parameters in Onready, process return data in OnFinish, ontimeout error handling.
The returned data can be either the address of the image or the corresponding data URI, which is then processed to _preview.
Of course, for different background output, data processing methods are different, can be modified as needed.

In the background it is best to reduce the image based on the parameters passed, minimizing the return data to improve the preview speed.

"Filter Mode"

The filter mode gets the file local path in the _filterdata program, but IE7/8 does not allow the image to be displayed directly using the local path.
However, you can still use the filter to make a preview image with a local path.

The filter mode uses the _filtershow method to display the preview picture.
First call the _filterpreload method to set the filter to preload the picture object.
Unlike the normal preloaded picture object, the filter preload object uses a filter to display the picture, so it does not necessarily have to be an image element.
The program uses the DIV element as the filter preload object:

Code

Hide elements in style settings and add filters to make the filter effective width and height must set a value.
To get the dimensions, you can only use visibility to hide and insert the body, as described in the AlphaImageLoader filter.

Then preload the image in the _filtershow:

try{
Preload.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = data;
}catch (e) {this._error ("filter Error"); return;}

If you succeed, then load the image with IMG:

This.img.style.filter = "Progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod= ' scale ', src=\" "+ Data +" \ ")";

Note that if there is a ")" in the path, such as "%", there is a similar problem of SQL injection in the direct stitching into the filter string.
The program will first encode these sensitive characters in the escape code:

data = This._data.replace (/[) ' "%]/g, function (s) {return Escape (Escape (s));});

Why do you want to do the escape code two times? When the test finds that "%" is only turned once, there are still problems when encountering characters such as "%40".
So I guess, the character before use will be two times unescape decoding, so corresponding to do two times escape coding sure enough.
Although the preloaded object is directly set to the SRC attribute of the filter, there is also a "%" of the splicing word problem, so also to escape encoding.
PS: Although single quotes and double quotes are not necessary here, it is also a relief point to replace them together.

Also note that the preview object does not set the filter in a Filters.item way.
Because the element cannot get the filter object through Filters.item before it is inserted into the document, the filter can be pre-set through the style.
Therefore, in the case of indeterminate element position, the filter can only be set with style.

Finally call _imgshow to set the size:

This._imgshow (Imagepreview.transparent, Preload.offsetwidth, preload.offsetheight);

Since IMG is a picture object, a small icon is displayed by default, so that you can get rid of this small icon and let it display a transparent image.
The program passes the imagepreview.transparent to set the transparent picture, the data URI and the MHTML again description.
PS: Of course, you can also use the div in the filter mode to preview the image object has no small icon, but this compatibility will be a lot of trouble.

"AlphaImageLoader Filter"

The filter mode uses the AlphaImageLoader filter.
It works by displaying a picture between the object's background and its contents within the bounds of the object container.
If you load a PNG image, its transparency is supported, so it is more used to resolve PNG compatibility issues.
Refer to MSDN's AlphaImageLoader filter and the Microsoft.alphaimageloader filter for details.
It includes three properties: enabled (whether the filter is active), Sizingmethod (image display), and src (image path).
The program mainly uses the following two properties.

There are three ways of Sizingmethod:
Crop: Cut the picture to fit the object size;
Image: Default value. Increase or decrease the size boundary of the object to fit the size of the picture;
Scale: Scales the picture to fit the object's dimension boundaries.

To preload the image object _preload, you need to get the original size of the image, so use image mode.
While the preview Image object IMG, you want to display the picture according to the set size, so use the scale method.

The path to the SRC attribute setting also supports local paths, which is the key to implementing the filter pattern.
Fortunately, the filter is not as secure as the file control, otherwise IE7/8 has no way to implement a local preview.

"Nsidomfile Interface"

FF starts at 3.0 (or earlier), it cannot get the file local path through the Value property of the file control, nor does it support directly displaying the picture with a local path.
But, happily, it also provides the Nsidomfile interface, which is better able to get the file data.
The file control in FF has a FileList object that contains the file object with the Nsidomfile interface.
The Ps:filelist object appears to be a NodeList collection, but it can only be reserved with the first one, possibly for future implementations of a file control to select multiple files.

This file object has three ways to get file data:
Getastext: Gets the text data of the file, can be encoded by the parameter setting;
Getasdataurl: Gets the file's data URI (URL?) Data
Getasbinary: Gets the binary data of the file.
Where Getasdataurl obtains data URI data that can be used to display a picture, which is used in the _domfiledata to get it.

The file object also supports two properties: filename (file name, excluding path), and filesize (file size).
Refer to Mozilla's file and nsidomfile for specific instructions.

"Data URI and MHTML"

The data URI has been mentioned more than once, in detail see "Data uri and MHTML" in Huqiu.
The main function of the data URI is to replace the data with characters, thus "embedding" the file in the code.
In addition to IE, other browsers are generally well supported by the data URI.
IE8 also has limited support for detailed reference to MSDN's data Protocol.

Since Opera,safari and chrome require remote mode browsers to support the data URI, the program is returning the information in the form of the database URI.
The return data URI does not need to create a file, and one less HTTP request than the method that returns the path.
The PS:IE8 only supports 32k data URI, and you should be aware of the data size when using IE8.

In the filter mode requires a transparent image to remove the IMG default display of small icons, the general method requires a picture file.
To "save" This file, you can use the data URI to make a 1*1 transparent image:

data:image/gif;base64,r0lgodlhaqabaiaaap///waaach5baeaaaaalaaaaaabaaeaaaicraeaow==

If the data URI is supported, a transparent image can be displayed as long as the IMG SRC is set to this value.

Although IE6/7 does not support the data URI, there are also MHTML can make.
There is a commented code at the beginning of the imagepreviewd.js:

Code

Where the value of boundary is the delimiter identifier, which describes the characters used to separate data segments.
Content-location describes the associated reference location, which can be used as the identity of the data segment.
Content-transfer-encoding is the character encoding form.
The following code is the Base64 encoded data for 1*1 transparent images.

This is then called in the code (for example, to set the SRC attribute of an IMG element):
MHTML: File full path!blankimage
Can be linked to a transparent picture.

Then we have to solve the problem of how to get the full path of the script (JS file), including the path from the beginning of the HTTP.
The first thing to get when the script runs is that the currently running script is definitely the last of the document.scripts:

DOCUMENT.SCRIPTS[DOCUMENT.SCRIPTS.LENGTH-1]

PS:FF does not support document.scripts and can be compatible with getElementsByTagName ("script").

You can then use GetAttribute to get the full path of the script from Src:

Document.scripts[document.scripts.length-1].getattribute ("src", 4)

IE6/7 's getattribute supports the second parameter, which is set to 4 to return the URL address of the full path, referring to MSDN's getattribute Method in detail.

In combination with the data URI and MHTML you can get transparent picture data like this:

Imagepreview.transparent = $ $B. IE7 | | $ $B. IE6?
"MHTML:" + document.scripts[document.scripts.length-1].getattribute ("src", 4) + "!blankimage":
"data:image/gif;base64,r0lgodlhaqabaiaaap///waaach5baeaaaaalaaaaaabaaeaaaicraeaow==";

Be careful when using:
Scripts must be saved separately as a file path for MHTML.
To automatically get the full path you need to link the file with the script tag.

"Super Space"

The program also has a Dispose method for destroying the program.
This includes the following sections:
_upload uploading a File object: it already has a Dispose method to destroy the program;
_preload pre-loaded Image object: First clear its Onload/onerror event before removing the element;
File and IMG attributes: Set directly to NULL, because not a program-created element is left to the consumer to remove.

When it comes to removing elements, by the way hyperspace (DOM hyperspace), this is seen in "PPK talking JavaScript."
Presumably, when an element is not inside the DOM, and JS is associated, the element does not disappear, but is stored in a place called hyperspace.
Dom Hyperspace section of the detailed reference book.
The book also says that you can determine whether an element is in hyperspace based on whether it has parentnode, but test the following code:

<body></body>
<script>
var elm = document.createelement ("div");
alert (Elm.parentnode);
Document.body.removeChild (Document.body.appendChild (Elm));
alert (Elm.parentnode);
</script>

The first time parentnode is null, no problem, supposedly the second time should also be null, but IE is an object.
After testing, the NodeType of this object is 11, which is a fragment object (FRAGMENT).
Also, the parentnode of each element that is removechild removed is different, resulting in a separate fragment object.
This situation is not in the "hyperspace", but the book is only said "generally", do not have to be too sophisticated.

What about clearing it with innerHTML? Then test the following code:

<body><div id= "Test" ></div></body>
<script>
var elm = document.getElementById ("test");
Document.body.innerHTML = "";
alert (Elm.parentnode);
</script>

The result is also null in IE, it seems that removechild and innerHTML have different results when they clear the elements.

That fragment object seems to be useless (is it parentnode?) ), that is not innerhtml is certainly better than removechild?
Then test the following code:

Code

When using removechild, the structure of the removed element does not change, and the effects of each browser are the same.
When used with innerHTML, the other browsers have the same effect as removechild, but only one "shell" is left on the element that is removed from ie.

Personal speculation, ie when using innerHTML, the removed elements will become a separate element, lost each other's connection.
The image point is that removechild is directly broken branches, but also continue to use grafting, and innerhtml is to take down the leaf node needs, and then burn the branches.
PS: Just speculate, please let me know who has the official information.

Then the advantage of removechild is that the removed elements can be reused, the compatibility is good, and the downside is that IE will produce a useless fragment object.
The advantage of innerHTML is that it will not produce unnecessary debris objects, convenient and efficient, but the elements removed in IE can no longer be used, there are compatibility issues.
That can be used according to the need to use different methods, as to prevent memory leaks with that good, feeling is innerhtml, but no more in-depth study of the words are not clear.

Tips for use

In general, the preview method is called in onchange, which displays the previews immediately after the file is selected.

It is best to execute the Dispose method once to destroy the program, prevent memory leaks, and so on, when no programs are required.

With Imagepreview.transparent, you can display transparent images without having to hide or add additional files.

The Resetfile in the second instance is used to reset the file control, with a detailed reference to the reset of file here.
The file control style settings refer to the file style in detail here.

The ASP version uses the Persits.jpeg component to scale the picture, and the test installs the component first.

Instructions for use

When instantiating, there are two necessary parameters, namely the file control object and the preview display object of the IMG element:

New Imagepreview (File, IMG);

Optional parameters are used to set the default properties of the system, including:
Properties: Default value//description
mode:imagepreview.mode,//Preview Mode
ratio:0,//Custom Scale
maxwidth:0,//thumbnail width
maxheight:0,//thumbnail Height
Oncheck:function () {},//is executed when preview is detected
Onshow:function () {},//When preview picture is executed
Onerr:function () {},//Preview error when executing
The following is valid in remote mode
action:undefined,//Set Action
timeout:0//Setting Timeout (0 is not set)
If you want to use remote mode, you must set an action.

The following methods are also available:
Preview: Perform the previewing operation;
Dispose: Destroys the program.

Program source Code

Code

Full instance download (ASP)

Full instance download (ASP version)

JSP version provided by Felsenlee: full instance Download (JSP version)

Excerpted from http://www.cnblogs.com/cloudgamer/

The program contains the JS Tool library Cjl.0.1.min.js, the original here.

JavaScript Image upload Preview effect