file upload using iframe

didasoft

浏览: 164966 次
性别:
来自: 深圳

最近访客更多访客>>

bbls1983

kidneyball

我真的是权gg

MGBD

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax JavaScript WordPress IE Gmail

<html>
2

<head>
3

TotalFileFields = 5;
5

StartUpload = false;
6

CurrentFormID = 1;
7

function FilesUpload() {
9

while (1) {
10

if (CurrentFormID > TotalFileFields) return true;
11

if (eval(’document.frm’ + CurrentFormID + ‘.upFile.value’) == ”) {
12

CurrentFormID++;
13

continue;
14

}
15

break;
16

}
17

StartUpload = true;
18

eval(’document.frm’ + CurrentFormID + ‘.submit()’);
19

return false;
20

}
21

function myIFrame_OnLoad() {
23

if (!StartUpload) return;
24

CurrentFormID++;
25

if (FilesUpload()) {
26

StartUpload = false;
27

CurrentFormID = 1;
28

alert(’UPLOAD COMPLETE’);
29

}
30

}
31

function GenerateUploadForms() {
33

for (i = 1; i <= TotalFileFields; i++) {
34

document.write(’<form name=”frm’ + i + ‘” method=”post” action=”http://localhost/” target=”myIFrame” enctype=”multipart/form-data”>’);
35

document.write(’<input type=”file” name=”upFile”/></form>\n’);
36

}
37

}
38

</script>
39

</head>
40

<body>
41

<input type=”button” value=”UPLOAD” onclick=”FilesUpload();”/>
43

http://vinayakshrestha.wordpress.com/2007/03/20/javascript-multiple-files-upload-trick/

//creating the iframe
2

var iframe = document.createElement("iframe");
3

iframe.setAttribute("id","micox-temp");
4

iframe.setAttribute("name","micox-temp");
5

iframe.setAttribute("width","0");
6

iframe.setAttribute("height","0");
7

iframe.setAttribute("border","0");
8

iframe.setAttribute("style","width: 0; height: 0; border: none;");
9

//add to document
11

form.parentNode.appendChild(iframe);
12

window.frames['micox-temp'].name="micox-temp"; //ie sucks

http://elmicoxcodes.blogspot.com/2007/03/asynchronous-upload-like-ajax-1.html

Ajax extensions does not support file upload. So, what I have done is create an iframe and put a file upload form inside that iframe. When the upload is complete, the event can then be relayed to the ajax trigger events and do additional tasks in ordinary ajax coding.

This method can also be made GMail like. You can control anything of the iframe using javascript. And hence you can do something like IFrame.forms[0].submit() in javascript to automatically start files uploading (and as it is iframe, it would not look like form post). You can also easily poll the status of the iframe, so that if user clicks other form buttons in your page, you can wait for iframe to complete upload and then finally do other task.

分享到：