Js dynamically creates an upload form using iframe to simulate Ajax implementation without refreshing _ javascript tips-js tutorial

This article describes how to dynamically create an upload form by using iframe to simulate Ajax refreshing. For more information, see The Code is as follows:

Script
Window. onload = function (){
Upfile ('file. php ');
}


/*
** Url path
**/
Function upfile (url ){
// Create an iframe
Var iframe = document. createElement ("iframe ");
Document. body. appendChild (iframe );
Iframe. id = 'iframename ';
Iframe. name = 'iframename ';
Iframe. style. display = 'none ';
// Create a form
Var turnForm = document. createElement ("form ");
Document. body. appendChild (turnForm );
TurnForm. method = 'post ';
TurnForm. action = url;
TurnForm. encoding = "multipart/form-data ";
TurnForm. name = 'formnamer ';
TurnForm.tar get = 'iframename ';
// Create a hidden form
Var newElement = document. createElement ("input ");
NewElement. setAttribute ("name", "inputname ");
NewElement. setAttribute ("type", "file ");
NewElement. setAttribute ("value ",'');
TurnForm. appendChild (newElement );
}

// Form submission
Function formSubmit (){
// Var res = document. formNamer. inputname. value;
Document. formNamer. submit ();
}

// Return Value
Function callback (result ){
// Parse response parent.doc ument. getElementById ('iframename'). style. display = 'block'; view background data through iframe
If (result ['error'] = 0 ){
Document. getElementById ('test'). src = result ['img '] [1] +'/'+ result ['img'] [2];
} Else if (result ['error'] = 1 ){
Alert (result ['meg']);
} Else if (result ['error'] = 2 ){
Alert (result ['meg']);
} Else if (result ['error'] = 3 ){
Alert (result ['meg']);
} Else if (result ['error'] = 4 ){
Alert (result ['meg']);
} Else {
Alert (result ['meg']);
}

}

Script

Upload

File. php

The Code is as follows:

Header ("content-Type: text/html; charset = Utf-8 ");

If (@ is_uploaded_file ($ _ FILES ['inputname'] ['tmp _ name']) {

$ F = $ _ FILES ['inputname'];
$ Name = $ f ["name"];
$ Size = $ f ["size"];
$ Type = $ f ["type"];
$ FileName = $ f ["tmp_name"];

Switch ($ type ){
Case 'image/jpg ': $ okType = true;
Break;

Case 'image/jpeg ': $ okType = true;
Break;

Case 'image/png ': $ okType = true;
Break;

Case 'image/gif': $ okType = true;
Break;
}

If ($ okType ){
$ Error = $ f ["error"];
Echo 'file name: '. $ name .'
';
Echo 'file type: '. $ type .'
';
Echo 'file size: '. round ($ size/1024).' K
';
Echo 'temporary file storage path: '. $ fileName .'
';

$ FileDir = dirname (_ FILE _). '/img/upfile'. time (). $ name;
$ Img = explode ('/', $ fileDir );

Move_uploaded_file ($ fileName, $ fileDir );

$ Data = array ();
$ Data ['img '] = $ img;
$ Data ['name'] = $ name;
$ Data ['type'] = $ type;
$ Data ['SIZE'] = $ size;
$ Data ['filename'] = $ filename;
$ Data ['filedir'] = $ fileDir;

If ($ error = 0 ){
/* Echo 'upload successful! ';
Echo 'preview :';
Echo"
";
Echo 'file name'. $ img [2]; */
$ Data ['error'] = 0;
Exit ("script" parent. callback (". json_encode ($ data)."); script ");

} Elseif ($ error = 1 ){
$ Data ['error'] = 1;
$ Data ['meg'] = 'exceeds the file size. Set' in the php. ini file ';
Exit ("script" parent. callback (". json_encode ($ data)."); script ");
} Elseif ($ error = 2 ){
$ Data ['error'] = 2;
$ Data ['meg'] = 'exceeds the file size specified by the MAX_FILE_SIZE option ';
Exit ("script" parent. callback (". json_encode ($ data)."); script ");
} Elseif ($ error = 3 ){
$ Data ['error'] = 3;
$ Data ['meg'] = 'only part of the file is upload ';
Exit ("script" parent. callback (". json_encode ($ data)."); script ");
} Elseif ($ error = 4 ){
$ Data ['error'] = 4;
$ Data ['meg'] = 'No file is uploaded ';
Exit ("script" parent. callback (". json_encode ($ data)."); script ");
} Else {
$ Data ['meg'] = 'size of the uploaded file is 0 ';
Exit ("script" parent. callback (". json_encode ($ data)."); script ");
}

}
} Else {
$ Data ['error'] = 4;
$ Data ['meg'] = 'No file is uploaded ';
Exit ("script" parent. callback (". json_encode ($ data)."); script ");
}
?>