asp.net file picture upload with preview effect

ASP tutorial. net file picture upload with preview effect

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

The program has several preview modes:
Simple mode: Get the picture path directly from the value of file to display the preview, which is suitable for IE6;
Filter mode: Through selection get file's picture path, and then use the filter to display the preview, apply to IE7/8;
Domfile mode: Calls the file's Getasdataurl method to get the data URI to display the preview, which is applicable to FF3;
Remote mode: The final method, the file submitted after the background processing to return the image 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 you use the ability to test will be more trouble, so only use browser detection.
Because the browser's default mode does not change, this value is saved to the function property as a common property.
PS Tutorial: IE6 can also use the filter mode, but it has a better simple mode.

"Get Data"

When the preview method is invoked, the preview program is executed:

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

After passing the test, call _getdata to fetch the data and enter the next step as a _preview parameter.

The _getdata Data acquisition program is set up 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.
Because of compatibility issues, you should generally keep the default values, unless you are using fully compatible remote mode.

Inside the _getdatafun, return the data acquisition program according to mode:

Code
Switch (mode) {
Case "Filter":
return this._filterdata;
Case "Domfile":
return this._domfiledata;
Case "remote":
return this._remotedata;
Case "simple":
Default:
return this._simpledata;
}

Different patterns have different data-acquisition programs:
Filter Data Acquisition Program:

This.file.select ();
try{
Return Document.selection.createRange (). text;
finally {document.selection.empty ();}
Typically used in IE7/8, the file local path is obtained by the Selection object after file control select.
The file control cannot be hidden at this time, or it cannot be selected, but the general choice of files is definitely a select.
It is also possible to hide the data after it has been retrieved.

Domfile Data Acquisition Program:

return This.file.files[0].getasdataurl ();
Using Getasdataurl to fetch data from the file control, this method is temporarily supported only by FF3.

Remote Data Acquisition Program:

This._setupload ();
This._upload && this._upload.upload ();
Use _upload upload file object to submit the data backstage, according to the returned data again.
This method does not belong to the local preview, there is no way to do it.

General Data Acquisition Program:

return this.file.value;
The most primitive method, now only IE6 also supports obtaining the local path directly from the value of file.

After the data is obtained, the parameters of the _preview Preview program are processed again:

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

First exclude null values or the same value, and then execute the _show program to display the preview, where the _data property is used to save the current picture data.
The picture may have a large SRC value when it uses the data URI, and an "invalid pointer" error occurs when IE8 gets a large src value.
Saving this value with the _data property prevents this error from being fetched from the SRC value.

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

"Show preview"

The _show Preview Viewer 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 _simpleshow display program is used to display the preview picture.
It will call the _simplepreload method to set the general Preload picture object:

Code
if (!this._preload) {
var preload = This._preload = new Image (), othis = this,
onload = function () {othis._imgshow (Othis._data, This.width, this.height);
This._onload = function () {this.onload = null; Onload.call (this);}
Preload.onload = $ $B. ie? This._onload:onload;
Preload.onerror = function () {othis._error ();};
else if ($ $B. IE) {
This._preload.onload = This._onload;
}

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

Notice that the Ie6/7 gif is loaded with bugs and tests the following code:

Code
<! DOCTYPE html><body><div id= "div" ></div></body>
<script>
Img.onload = function () {div.innerhtml + = This.complete + ",";};
IMG.SRC = "Http://tuan.pcpop.com/image/my/loading.gif";
</script>

General picture after the onload does not repeat, but the Ie6/7 gif every time the loop playback will perform a onload.
PS:IE8 has the same problem in non-standard (odd) mode.
You can determine whether the complete is false in the onload time to see if the load is repeated.
PS: In addition to IE, other browsers in the OnLoad complete has been true.
The problem is that the complete is still true when you select another picture, which makes no sense.
So have to in the onload inside reset onload is null, and in each select File Reset onload.

Then set the _preload src preload picture and perform a _imgshow display preview if the download is successful.
Note that the setting of SRC is set to Onload/onerror, otherwise the setup will not trigger the event until the load is completed.

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

Code
var img = this.img, style = Img.style,
Ratio = Math.max (0, this.ratio) | | Math.min (1,
Math.max (0, this.maxwidth)/width | | 1,
Math.max (0, this.maxheight)/height | | 1
);

Style.width = Math.Round (Width * ratio) + "px";
Style.height = Math.Round (Height * ratio) + "px";

The key here is to get the ratio proportional value, and if the custom ratio is greater than 0, use the custom scale directly, otherwise it will be automatically calculated based on the parameters.
Automatic computing first ensures that maxwidth maximum width and maxheight maximum height is greater than or equal to 0.
Then with the original width to do "/" operation to get the proportion, if the proportion of 0 means no limit, then the proportion automatically changed to 1.
Finally take a relatively small proportion to calculate, the program set the proportion of the maximum value of 1, so will not automatically enlarge the picture.
Of course, the calculation of proportion can be modified according to the need.
Ps:style has higher precedence than attributes (Width/height), so use the style setting.

The final set of IMG SRC will be able to implement the preview.

"Remote Mode"

Remote mode first submits the file control to the background, displaying the picture by returning the 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 invoked 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 the _upload:

Code


var othis = this;


This._upload = new Quickupload (This.file, {


Onready:function () {


This.action = othis.action; This.timeout = Othis.timeout;


var parameter = This.parameter;


Parameter.ratio = Othis.ratio;


Parameter.width = Othis.maxwidth;


Parameter.height = Othis.maxheight;


},


Onfinish:function (IFRAME) {


try{


Othis._preview (Iframe.contentWindow.document.body.innerHTML);


}catch (e) {othis._error ("remote Error");}


},


Ontimeout:function () {othis._error ("timeout error");}


});

The quickupload used here is simply no refresh file upload program.
Setting parameters in Onready, processing the returned data in OnFinish, and ontimeout error handling.
The returned data can be the address of the picture or the corresponding data URI, and then processed for _preview.
Of course, for different background output, the way of data processing is different, you can modify according to need.

The background is best based on the parameters passed to reduce the picture, as far as possible to reduce the return data to improve the preview speed.

"Filter Mode"

The filter mode obtains the file local path in the _filterdata program, but IE7/8 does not allow the picture to be displayed directly using the local path.
However, you can still use the filter, the local path to do the preview picture effect.

The filter mode uses the _filtershow method to display the preview picture.
It first calls the _filterpreload method to set the filter preload Picture object.
Unlike a general preload picture object, the filter preload object uses a filter to display the picture, so it is not necessarily an image element.
The program uses the DIV element as the filter preload object:

Code
var preload = This._preload = document.createelement ("div");

$ $D. SetStyle (preload, {
Width: "1px", Height: "1px",
Visibility: "Hidden", Position: "Absolute", left: " -9999px", Top: " -9999px",
Filter: "Progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod= ' image ')"
});

var body = document.body; Body.insertbefore (preload, body.childnodes[0]);

Hide elements and add filters in the style settings to make the filter effective width and height must set a value.
Because to get the size, you can only use visibility to hide and insert the body, about the AlphaImageLoader filter after the introduction.

Then preload the picture in the _filtershow:

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

Success, and then to the IMG load Picture:

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

Note that if you have ")" and "%" in the path, a problem like SQL injection occurs when you splice directly into the filter string.
The program first encodes these sensitive characters by escape code:

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

Why do you have to do two escape codes? The test found that "%" only once, encountered "%40" characters such as still can be problematic.
So I guess, the characters in the use of two times before the unescape decoding, so the corresponding two times escape code is no problem.
Although the preload object is directly set the SRC attribute of the filter, but there is also a "%" of the stitching word problem, so also want to escape encoding.
PS: Although single quotes and double quotes are not necessary here, or to replace the relief points together.

Also note that the preview object does not set the filter in a Filters.item way.
Because an element cannot get a filter object through Filters.item before it is inserted into a document, it can be preset with the style filter.
So in the case where the element position is not determined, the filter can only be set with the style.

Last Call _imgshow set size:

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

Because IMG is a picture object, a small icon is displayed by default, so you can let it display a transparent picture in order to remove the small icon.
The program passes the imagepreview.transparent to set up the transparent picture, the data URI and the MHTML are explained in detail.
PS: Of course, can also be in the filter mode with a DIV preview Image object There is no small icon, but this compatibility will be a lot of trouble.

"AlphaImageLoader Filter"

The filter mode uses the AlphaImageLoader filter.
Its role is to display a picture between the object's background and the content within the object container boundary.
If a PNG image is loaded, its transparency is supported, so it is more used to solve PNG compatibility issues.
Refer to the MSDN AlphaImageLoader Filter and the "Microsoft.alphaimageloader filter" for details.
It includes three properties: enabled (whether the filter is activated), 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.

Pre-loading Picture object _preload, you need to get the original size of the picture, so use the image method.
and preview Image object IMG, then to the set size display picture, so to use scale way.

The SRC property setting path also supports the local path, which is the key to implementing the filter pattern.
Fortunately the filter does not improve security like the file control, otherwise IE7/8 will have no way to implement a local preview.

"Nsidomfile Interface"

FF, starting at 3.0 (perhaps earlier), cannot get a file-local path through the Value property of the file control, nor does it support the direct display of a picture with a local path.
Happily, however, it also provides a nsidomfile interface for better access to 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 used for the first time, possibly for future implementation of a file control to select multiple files.

This file object has three methods for obtaining file data:
Getastext: Gets the text data of the file, it can be coded by the parameter setting;
Getasdataurl: Gets the file's data URI (URL?) Data
Getasbinary: Gets the binary data for the file.
The data URI Getasdataurl obtained can be used to display the picture, which is used in _domfiledata to get the data.

The file object also supports two properties: filename (filename, 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 several times above, please see Qin Ge "Data uri and MHTML" in detail.
The main function of the data URI is to replace the character with the characters, thus "embed" the file in the code.
In addition to IE, other browsers are generally well supported by the data URI.
IE8 also has limited support, with detailed reference to MSDN's data Protocol.

Because the Opera,safari and chrome browsers that require remote mode support the data URI, the program returns the information in the form of a date URI.
The return data URI does not require the creation of a file and one less HTTP request than a method that returns a path.
PS:IE8 supports only 32k of data URI, and IE8 data size when used.

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 picture:

data:image/gif;base64,r0lgodlhaqabaiaaap///waaach5baeaaaaalaaaaaabaaeaaaicraeaow==
If you support the data URI, you can display a transparent picture by setting the IMG src to this value.

Although the IE6/7 does not support the data URI, there are also MHTML to enable.
There is an annotated code at the beginning of the imagepreviewd.js:

Code
content-type:multipart/related; boundary= "_cloudgamer"

--_cloudgamer
Content-location:blankimage
Content-transfer-encoding:base64

r0lgodlhaqabajeaaaaaap///////waaach5baeaaaialaaaaaabaaeaaaicvaeaow==

The value of the boundary is the separator identifier, which describes the character used to separate the data segment.
Content-location describes the associated reference location, which can be used as the identification of the data segment.
Content-transfer-encoding is the character encoding form.
The following code is the base64 encoded data for the 1*1 transparent picture.

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

Then we'll solve the problem of how to get the full path of the script (JS file) (The path that contains the HTTP start).
The first thing to get when the script runs is that the currently running script must be the last one 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)

The IE6/7 GetAttribute supports the second argument, set to 4, to return the URL address of the full path, and refer to the MSDN GetAttribute method in detail.

The data URI and the MHTML can be used to get transparent pictures:

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

Note When you use:
The script must be saved separately as a file path as required by the MHTML.
To get the full path automatically, you need to link the file with the script tag.

"Hyper-space"

The program also has a Dispose method for destroying the program.
Include these sections:
_upload upload File object: It itself already has a Dispose method to destroy the program;
_preload pre-loading Picture object: First clear its Onload/onerror event and remove elements;
File and IMG Properties: Set directly to NULL, because it is not the element created by the program, left to the user to remove.

When it comes to removing elements, by the way hyperspace (DOM hyperspace), this is seen from the "PPK talk about web effects."
Probably refers to when the element is not in the DOM, and JS has an association, the element does not disappear, but is kept in a place called "hyperspace".
The 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 there are 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 are null, no problem, the second time should be null, but IE is an object.
After testing, the object's NodeType is 11, which is a fragment object (FRAGMENT).
And the parentnode of the elements removed by the removechild are different, that is, the various fragmented objects are generated.
This is not in the "hyperspace", but the book is only said "in general", also do not have to be too sophisticated.

What about using innerHTML to clear it? Test the following code again:

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

The results are also null in IE, and it appears that RemoveChild and innerHTML have different results when purging elements.

The object of the fragment seems to be of little use (is it to ensure a parentnode?) Is it better to be innerhtml than RemoveChild?
Test the following code again:

Code
<body>
<style>div{border:1px solid #000; height:20px;} </style>
<span><div id= "Test1" >test1</div></span>
<span><div id= "Test2" >test2</div></span>
</body>
<script>
var div1 = document.getElementById ("Test1"), parent1 = Div1.parentnode;
Parent1.removechild (DIV1);
Alert (Div1.tagname + ":" + div1.innerhtml);
Parent1.appendchild (DIV1);

var div2 = document.getElementById ("Test2"), Parent2 = Div2.parentnode;
parent2.innerhtml = "";
Alert (Div2.tagname + ":" + div2.innerhtml);
Parent2.appendchild (DIV2);
</script>

When using removechild, the structure of the removal element does not change, and the effects of each browser are the same.
While using innerHTML cleanup, other browsers have the same effect as removechild, but only one "shell" is left in the IE removed element.

Personally speculated that IE in the use of innerHTML, the removed elements will become a separate element, lose contact with each other.
Image point is that removechild is directly broken branches, can continue to graft use, and innerHTML is the need for the leaf node to take down, and then burn the branches off.
PS: Just speculate, please let me know who has official information.

So the advantage of removechild is that the removed elements can be used again, compatibility is good, the bad place is IE will produce a useless debris object.
The advantage of innerHTML is that it will not produce redundant objects, convenient and efficient, but the elements removed in IE can not be used, there is a compatibility problem.
That can be based on the need to use different methods, as to prevent memory leaks with that good, the feeling is innerhtml, but there is no more in-depth study is not clear.

Use Tips

Generally, the preview method is called in onchange, which shows the preview immediately after selecting the file.

It is best to perform a Dispose method to destroy a program, prevent memory leaks, and so on without requiring a program.

Using Imagepreview.transparent, you can display transparent pictures without the need to hide or add additional files.

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

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

Instructions for use

When instantiated, there are two necessary parameters, respectively, of the file control object and the preview display object for 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 Proportions
maxwidth:0,//thumbnail width
maxheight:0,//thumbnail Height
Oncheck:function () {},//Preview test execution
Onshow:function () {},//when previewing pictures
Onerr:function () {},//When preview error is performed
The following is valid in remote mode
action:undefined,//Set Action
timeout:0//Setting Timeout (0 is not set)
You must set an action if you want to use remote mode.

The following methods are also available:
Preview: Perform preview operation;
Dispose: Destroy the program.

Program source Code

Code


var Imagepreview = function (file, IMG, options) {





This.file = $$ (file);//Files Object


this.img = $$ (IMG);//Preview Picture Object





This._preload = null;//Pre-loaded Picture object


This._data = "";//Image data


This._upload = Upload file object used by Null;//remote mode





var opt = this._setoptions (options);





This.action = opt.action;


This.timeout = Opt.timeout;


This.ratio = Opt.ratio;


This.maxwidth = Opt.maxwidth;


This.maxheight = Opt.maxheight;





This.oncheck = Opt.oncheck;


This.onshow = Opt.onshow;


This.onerr = Opt.onerr;





Setting up a data acquisition program


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


Set Preview Display program


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


};


According to browser capture mode


Imagepreview.mode = $ $B. IE7 | | $ $B. IE8? "Filter":


$ $B. Firefox? "Domfile":


$ $B. Opera | | $ $B. Chrome | | $ $B Safari? "Remote": "Simple";


Transparent picture


Imagepreview.transparent = $ $B. IE7 | | $ $B. IE6?


"MHTML:" + document.scripts[document.scripts.length-1].getattribute ("src", 4) + "!blankimage":


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

Imagepreview.prototype = {


Set default Properties


_setoptions:function (options) {


This.options = {//default value


mode:imagepreview.mode,//Preview Mode


ratio:0,//Custom Proportions


maxwidth:0,//thumbnail width


maxheight:0,//thumbnail Height


Oncheck:function () {},//Preview test execution


Onshow:function () {},//when previewing pictures


Onerr:function () {},//When preview error is performed


The following is valid in remote mode


action:undefined,//Set Action


timeout:0//Setting Timeout (0 is not set)


};


Return $$.extend (this.options, Options | | {});


},


Start preview


Preview:function () {


if (This.file &amp;&amp; false!== This.oncheck ()) {


This._preview (This._getdata ());


}


},





Return Data Acquisition program according to mode


_getdatafun:function (mode) {


Switch (mode) {


Case "Filter":


return this._filterdata;


Case "Domfile":


return this._domfiledata;


Case "remote":


return this._remotedata;


Case "simple":


Default:


return this._simpledata;


}


},


Filter Data Acquisition Program


_filterdata:function () {


This.file.select ();


try{


Return Document.selection.createRange (). text;


finally {document.selection.empty ();}


},


Domfile Data Acquisition Program


_domfiledata:function () {


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


},


Remote Data Acquisition Program


_remotedata:function () {


This._setupload ();


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


},


General Data Acquisition Program


_simpledata:function () {


return this.file.value;


},





Set up a remote mode upload file object


_setupload:function () {


if (!this._upload &amp;&amp; this.action!== undefined &amp;&amp; typeof quickupload = "function") {


var othis = this;


This._upload = new Quickupload (This.file, {


Onready:function () {


This.action = othis.action; This.timeout = Othis.timeout;


var parameter = This.parameter;


Parameter.ratio = Othis.ratio;


Parameter.width = Othis.maxwidth;


Parameter.height = Othis.maxheight;


},


Onfinish:function (IFRAME) {


try{


Othis._preview (Iframe.contentWindow.document.body.innerHTML);


}catch (e) {othis._error ("remote Error");}


},


Ontimeout:function () {othis._error ("timeout error");}


});


}


},





Preview Program


_preview:function (data) {


Null value or same value does not perform display


if (!! Data &amp;&amp; Data!== this._data) {


This._data = data; This._show ();


}


},





Set general preload picture objects


_simplepreload:function () {


if (!this._preload) {


var preload = This._preload = new Image (), othis = this,


onload = function () {othis._imgshow (Othis._data, This.width, this.height);


This._onload = function () {this.onload = null; Onload.call (this);}


Preload.onload = $ $B. ie? This._onload:onload;


Preload.onerror = function () {othis._error ();};


else if ($ $B. IE) {


This._preload.onload = This._onload;


}


},


General display


_simpleshow:function () {


This._simplepreload ();


THIS._PRELOAD.SRC = This._data;


},





Set filter preload picture objects


_filterpreload:function () {


if (!this._preload) {


var preload = This._preload = document.createelement ("div");


Hide and set filters


$ $D. SetStyle (preload, {


Width: "1px", Height: "1px",


Visibility: "Hidden", Position: "Absolute", left: " -9999px", Top: " -9999px",


Filter: "Progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod= ' image ')"


});


Insert Body


var body = document.body; Body.insertbefore (preload, body.childnodes[0]);


}


},


Filter display


_filtershow:function () {


This._filterpreload ();


var preload = This._preload,


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


try{


Preload.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = data;


}catch (e) {this._error ("filter Error");


Set the filter and display


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


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


},





Show preview


_imgshow:function (src, width, height) {


var img = this.img, style = Img.style,


Ratio = Math.max (0, this.ratio) | | Math.min (1,


Math.max (0, this.maxwidth)/width | | 1,


Math.max (0, this.maxheight)/height | | 1


);


Set Preview Size


Style.width = Math.Round (Width * ratio) + "px";


Style.height = Math.Round (Height * ratio) + "px";


Set SRC


IMG.SRC = src;


This.onshow ();


},





Destruction procedures


Dispose:function () {


Destroying uploaded file objects


if (this._upload) {


This._upload.dispose (); This._upload = null;


}


Destroying a pre-downloaded picture object


if (this._preload) {


var preload = this._preload, parent = Preload.parentnode;


This._preload = Preload.onload = Preload.onerror = null;


Parent &amp;&amp; Parent.removechild (preload);


}


Destroying related objects


This.file = this.img = null;


},


Error


_error:function (Err) {


This.onerr (ERR);


}


}

The following is a simple file upload code

Try


{


(Image) Gvgradeuser.findcontrol (Imagegrade). Imageurl.tostring (). Trim ();


According to the grade of the series modified


int enbale = 0;


if (ddlStart.Text.ToString (). Trim () = = "normal")


{


Enbale = 0;


}


Else


{


Enbale = 1;


}


When a picture exists


if (ftxtflilename.hasfile)


{


Ftxtflilename.saveas (Server.MapPath) (". /gradeimage/") + FtxtFlileName.FileName.ToString (). Trim ());


if (Objcusgradelevelservice.setonegradelevelinfo (Convert.ToInt32) (Lblcode. Text.tostring (). Trim ()), txtName.Text.ToString (). Trim (), Convert.ToInt32 (TxtJiFenFanWei.Text.ToString (). Trim ()), Enbale, "~/personnelmanagement/gradeimage/" + FtxtFlileName.FileName.ToString (). Trim (), txtText.Text.ToString (). Trim ())


{


Lblmessage.visible = true;


Lblmessage.text = "Modified successfully";

}
Else
{
Lblmessage.visible = true;
Lblmessage.text = "modification Failed";
}

}


When a picture does not exist


Else


{


if (Objcusgradelevelservice.setonegradelevelinfonoimage (Convert.ToInt32) (Lblcode. Text.tostring (). Trim ()), txtName.Text.ToString (). Trim (), Convert.ToInt32 (TxtJiFenFanWei.Text.ToString (). Trim ()), Enbale, txtText.Text.ToString (). Trim ())


{


Lblmessage.visible = true;


Lblmessage.text = "Modified successfully";


}


Else


{


Lblmessage.visible = true;


Lblmessage.text = "modification Failed";


}


}


Dt_gradeuser = Objcusgradelevelservice.getallgradelevelinfo ();


Dtgradeuser ();


Btnadd.visible = true;


Btnclearupdate.visible = false;


Btnupdate.visible = false;


}


catch (Exception)


{


Lblmessage.visible = true;


Lblmessage.text = "modification Failed";


}