Asp.net (using iframe) source code (1/4)

Source: Internet
Author: User

In this article, we will not use ajax to upload a non-refreshing file, but use iframe to simulate ajax to implement a non-refreshing File Upload. If you need it, you can refer to the example below.

Let's take a look.

Let's download the full instance source code of the plug-in.

Asp http://down.bKjia. c0m/down/code/asp/2012/0508/24173.html

Http://down.bKjia. c0m/down/code/asp/2012/0508/24172.html

[Upload]

The most important method in the program is upload. You can call it to perform a refreshing upload.
The upload process is like this. First stop the last upload and determine whether to select a file.
Call _ setIframe, _ setForm, and _ setInput respectively to generate the required iframe, form, and input.

If the timeout attribute is set, the timer is automatically set:

The Code is as follows: Copy code

If (this. timeout> 0 ){
This. _ timer = setTimeout ($ F. bind (this. _ timeout, this), this. timeout * 1000 );
}

Ps: after testing, if the latency is less than 0, ie will cancel the execution, while other browsers will treat the execution as 0.

The program has a _ sending attribute to determine the upload status.
When stop, dispose, _ finis, and _ timeout, it is set to false.
Before the upload starts, set it to true.

The final form is submitted and the upload starts.

[Iframe]

The program uses the _ setIframe function to create an iframe for refreshing the new image.

Because the iframe name in ie cannot be modified, you need to create iframe as follows:

The Code is as follows: Copy code

Var iframename = "QUICKUPLOAD _" + QuickUpload. _ counter ++,
Iframe = document. createElement ($ B. ie? "<Iframe name =" "+ iframename +" ">": "iframe ");
Iframe. name = iframename;
Iframe. style. display = "none ";

Ps: For more information about the iframe name, see the iframe section.
You can modify the name of ie8, but it cannot be modified in non-standard (strange) mode.
Here, a QuickUpload function's own _ counter attribute is used as a calculator, which ensures that the iframe names of each instance will not be repeated.

In order to execute the callback function after the file is uploaded, The _ finish function is executed in the onload of iframe:

The Code is as follows: Copy code

Var finish = this. _ fFINISH =$ $ F. bind (this. _ finish, this );
If ($ B. ie ){
Iframe. attachEvent ("onload", finish );
} Else {
Iframe. onload = $ B. opera? Function () {this. onload = finish;}: finish;
}

In ie, you need to use attachEvent to bind onload, because setting onload directly in ie is invalid.
Besides attachEvent, onreadystatechange can also be used.
I am not clear about the reason. For details, refer to "the perfect method for judging whether iframe is loaded ".

There is another problem with loading iframe. Test the following code:

 

The Code is as follows: Copy code
<Body> <div id = "msg"> Status: </div> </body>
<Script>
Var msg = document. getElementById ("msg ");
Var iframe = document. createElement ("iframe ");
Iframe. onload = function () {msg. innerHTML + = "onload ,";}
Document. body. appendChild (iframe );
Iframe. src = "http://www.bKjia. c0m/phper/php.html"
</Script>

As a result, both safari and chrome trigger onload twice, while opera, ff, and ie (compatible with each other) are both once.

It is estimated that safari and chrome will be loaded for the first time after appendChild, and the loading is completed before src is set, so it is triggered twice.
If you set a src (except a null value) for iframe before inserting the body, the first loading is extended indirectly, and only once is triggered.
Ps: src without setting or null values is equivalent to link to "about: blank" (blank page ).

Therefore, opera, ff, and ie may be loading too slowly for the first time, and overwrite for the first time. Therefore, only one onload is triggered.
Ps: it may also be another reason, such as browser optimization. I'm not sure.

To solve the problem of loading too fast, you can determine whether to upload the status based on _ sending during onload.
Even if it is not tested, will there be a situation where the first onload is triggered just before submit after _ sending settings?
In the upload method, _ sending is placed after submit.
What if onload is triggered after the submit _ sending setting? (...? Bytes
This is basically not the case. If it does, put the _ sending setting in front of the submit.

Opera has another trouble. Test the following code:

The Code is as follows: Copy code

<Body>
<Div id = "msg"> Status: </div>
<Form action = "http://www.bKjia. c0m" target = "ifr">
</Form>
</Body>
<Script>
Var msg = document. getElementById ("msg ");
Var iframe = document. createElement ("iframe ");
Iframe. name = "ifr ";
Iframe. onload = function () {msg. innerHTML + = "onload ,";}
Document. body. appendChild (iframe );
Msg. innerHTML + = "submit ,";
Document. forms [0]. submit ();
</Script>

Ie and ff show submit, onload, safari and chrome show onload, submit, onload, consistent with the above analysis.
Opera shows that submit, onload, and onload are triggered after submit.
In this case, we cannot simply use _ sending.
Is it because submit cannot cancel iframe loading?
Set a src before appendChild. If the result is normal, only onload is triggered once. It seems yes.

Although I don't know the reason, there are still some solutions. One is to set a src before appendChild, And you can reset onload In the first onload, as in the program.
However, there are uncertainties in both methods, and they cannot completely solve the problem, but they cannot find a better method.

There is another problem with the onload of ff. If a server error such as ERROR_INTERNET_CONNECTION_RESET (the file size exceeds the server limit) occurs, the onload will not be triggered even after loading. A solution cannot be found for the moment.

One drawback of iframe is that it can only use onload to determine whether the loading is complete, but there is no way to determine whether the loading is successful.
There is no such thing as the status of XMLHTTP, and there is no way to identify errors such as 404.
This must be done well during use, such as the size of the file to be uploaded, the time-out period, and how to handle the problem of no response for a long time.


1 2 3 4

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.