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 ){ |
|
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 ++, |
|
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 ); |
|
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> |
|
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
