Upload a non-refreshing page file

File Upload is very common and there are some methods, but I have seen most of them based on flash, and XMLhttpResponse is also used to submit files. In fact, this is not so troublesome, I will introduce a more compatible usage here. Using iframe to implement the upload function of a non-refreshing page file, this method is also very common.
The iframe file Upload principle is as follows: first, the input file control is contained in the form, and the form attribute must be set to enctype = "multipart/form-data" to upload any file. However, this does not work, because after a form is submitted, it will automatically refresh the page. To prevent it from leaving this page, we can dynamically generate a hidden iframe on this submitted page, but don't forget to add another target attribute to the form and specify it as the name of iframe. After the form is submitted, the server will write the returned results in iframe. Finally, you can get the data from the iframe.
It is not difficult to understand the principle or implement it. More functions can be extended here, such as determining the file type, size, and so on before uploading, and adding a loading process. However, in the implementation process, there are still several difficulties: one is to obtain file information, which is obtained in different browsers in different ways; the other is to obtain the content in iframe. I did not solve these problems well, but it seems that there are no major problems, so I wrote the solution here.
Get File Information: Here I only implement the function of getting file names.
1 getFile: function (){
2 var fileInfo = {};
3 var isIE = !! Window. ActiveXObject;
4 // var isIE6 = isIE &&! Window. XMLHttpRequest;
5 // var isIE8 = isIE &&!! Document.doc umentMode;
6 // var isIE7 = isIE &&! IsIE6 &&! IsIE8;
7 var path = '';
8 if (isIE ){
9 path = document. getElementById (this. config. id). value;
10 fileInfo. fileName = path. slice (path. lastIndexOf ('\') + 1 );
11} else fileInfo. fileName = document. getElementById (this. config. id). files [0]. name;
12 return fileInfo;
13}

Get iframe content:
Document. getElementById ("iframe" ).find('body'{.html ();
Here I will first demonstrate a basic upload code for your reference. I don't have any interface. It's purely logical. The page must have a <input type = 'file' id = 'upload' name = 'file'/> tag, and then you can call it like this:
Var uploader = new FileUploader ({
Action: 'url', // upload address
OnChange: function () {}, // before upload
Loading: function () {}, // uploading Process
OnComplete: function () {}// after the upload is complete

Click the button to select a file and submit it immediately.
Complete code:
1 function FileUploader (config ){
2 this. config = config;
3 this. input = $ ('#' + this. config. id );
4 this. action = this. config. action | '';
5 this. method = this. config. method | 'post ';
6 this. type = this. config. type | 'json ';
7 this. init ();
8}
9 FileUploader. prototype = {
10 init: function (){
11 var that = this;
12 this. addListener ('change', function (){
13 if (that. config. onChange ){
14 var res = false;
15 res = that. config. onChange. call (this, that. getFile ());
16 if (! Res) return false;
17}
18 that. load ();
19 });
20 },
21 load: function (){
22 var that = this;
23 this. wrap ();
24 this. send ();
25 if (that. config. loading) that. config. loading. call (that );
26 $ ('iframe'). bind ('load', function (){
27 var data = that. getResponse (document. getElementById ("hidden_frame" )).find('body'{.html ();
28 data = data. replace (/<pre. *> (. *) <\/pre>/, "$1 ");
29 if (that. config. onComplete ){
30 if (that. type = 'json') data = eval ('+ data + ')');
31 that. config. onComplete. call (this, data, that. input );
32}
33 // this. input. unwrap ();
34 $ (this). remove ();
35 });
36 },
37 getResponse: function (iframe ){
38 var doc = $ (iframe). contents ();
39 return doc;
40 },
41 remove: function (){
42 this. input. remove ();
43 },
44 getFile: function (){
45 var fileInfo = {};
46 var isIE = !! Window. ActiveXObject;
47 var isIE6 = isIE &&! Window. XMLHttpRequest;
48 var isIE8 = isIE &&!! Document.doc umentMode;
49 var isIE7 = isIE &&! IsIE6 &&! IsIE8;
50 var path = '';
51 if (isIE ){
52 path = document. getElementById (this. config. id). value;
53 fileInfo. fileName = path. slice (path. lastIndexOf ('\') + 1 );
54} else fileInfo. fileName = document. getElementById (this. config. id). files [0]. name;
55 return fileInfo;
56 },
57 send: function (cb ){
58 var that = this;
59 this. input. parent ('form'). submit ();
60 },
61 wrap: function (){
62 this. input. wrap (
63' <form enctype = "multipart/form-data" '+
64 'Action = "'+ this. action +'" method = "'+ this. method +'" target = "hidden_frame"> '+
65' </form>'
66 );
67 this. input. parent ('form'). after (
68 '<iframe name = "hidden_frame" id = "hidden_frame" src = "javascript: false;" style = "display: none"> </iframe>'
69 );
70 },
71 addListener: function (type, cb ){
72 if (type = 'change') this. input. bind ('change', cb );
73}
74 };

From bilipan