Currently, there are several common asynchronous file upload functions, such as using the iframe framework, ajax functions, and flash + php functions, the following is an example of how ajax and iframe Implement Asynchronous file upload.
Method 1: Use jquery ajaxfileupload. js to upload files
In fact, it is to implement the upload of non-Refresh files. The IFRAME File Upload principle can be used.
In fact, when using PHP to upload files... You can only use $ _ FILES, but if we only use JS to retrieve its ID, such as <input id = 'img 'type = 'file'> .doc ument. getElementById ('img '). $ ("# img") in the form of value or jquery cannot be uploaded in real time (but many people still do this, and I did it at the beginning ).
However, what should I do if I need to implement the so-called "Asynchronous upload" function? You can only use third-party components or write one by yourself (embed an IFRAME In the webpage ). But if it is considering the development time, it is recommended to use a third party, here there is a good Ajax File Upload Component, that is, "ajaxfileupload. js", its component is: http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js
Process:
(1) Front-End file code: test. php
Copy codeThe Code is as follows: <script type = "text/javascript" src = "jquery. js"> </script>
<Script type = "text/javascript" src = "ajaxfileupload. js"> </script>
<Script type = "text/javascript">
Function ajaxFileUpload ()
{
$. AjaxFileUpload
(
{
Url: 'doajaxfileupload. php', // the server on which you process the uploaded files
Secureuri: false,
FileElementId: 'img ',
DataType: 'json ',
Success: function (data)
{
Alert (data. file_infor );
}
}
)
Return false;
}
</Script>
The corresponding HTML is:
<Input id = "img" type = "file" size = "45" name = "img" class = "input">
<Button class = "button" id = "buttonUpload" onclick = "return ajaxFileUpload ();"> Upload </button>
This completes the client.
(2) doajaxfileupload. php on the server side
Here, you can save it to check whether the value is actually passed.
Copy codeThe Code is as follows: $ file_infor = var_export ($ _ FILES, true );
File_put_contents ("d: file_infor.php". $ file_infor );
In this way, when you call the generated file_infor.php file, you will see the familiar information:
Copy codeThe Code is as follows: array (
'Name' => 'lamp.jpg ',
'Type' => 'image/pjpeg ',
'Tmp _ name' => 'C: windowstempphpFA. tmp ',
'Error' => 0,
'SIZE' => 3127
)
Of course, the real processing is like this:
Copy codeThe Code is as follows: <? Php
$ UpFilePath = "d :/";
$ OK = @ move_uploaded_file ($ _ FILES ['img '] ['tmp _ name'], $ upFilePath );
If ($ OK = FALSE ){
Echo json_encode ('file _ infor '=> 'upload failed ');
} Else {
Echo json_encode ('file _ infor '=> 'upload successful ');
}
?>
Method 2: Use the iframe framework to upload images
The html code is as follows:
Copy codeThe Code is as follows: <div class = "frm">
<Form name = "uploadFrom" id = "uploadFrom" action = "upload. php" method = "post" target = "tarframe" enctype = "multipart/form-data">
<Input type = "file" id = "upload_file" name = "upfile">
</Form>
<Iframe src = "" width = "0" height = "0" style = "display: none;" name = "tarframe"> </iframe>
</Div>
<Div id = "msg">
</Div>
Index. js file:
Copy codeThe Code is as follows: $ (function (){
$ ("# Upload_file"). change (function (){
$ ("# UploadFrom"). submit ();
});
});
Function stopSend (str ){
Var im = " ";
$ ("# Msg"). append (im );
}
Upload. php file:
Copy codeThe Code is as follows: <? Php
$ File = $ _ FILES ['upfile'];
$ Name = rand (). dechex (rand (). ". jpg ";
Move_uploaded_file ($ file ['tmp _ name'], "upload/images/". $ name );
// Call the js function of the iframe parent window
Echo "<script> parent. stopSend ('$ name') </script> ";
?>
Method 3: Original Ecological ajax File Upload
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> Html5 Ajax File Upload </title>
<Meta charset = "UTF-8">
<Script type = "text/javascript">
Var xhr;
Function createXMLHttpRequest ()
{
If (window. ActiveXObject)
{
Xhr = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest)
{
Xhr = new XMLHttpRequest ();
}
}
Function UpladFile ()
{
Var fileObj = document. getElementById ("file"). files [0];
Var FileController = 'upload. php ';
Var form = new FormData ();
Form. append ("myfile", fileObj );
CreateXMLHttpRequest ();
Xhr. onreadystatechange = handleStateChange;
Xhr. open ("post", FileController, true );
Xhr. send (form );
}
Function handleStateChange ()
{
If (xhr. readyState = 4)
{
If (xhr. status = 200 | xhr. status = 0)
{
Var result = xhr. responseText;
Var json = eval ("(" + result + ")");
Alert ('image link: n' + json. file );
}
}
}
</Script>
<Style>
. Txt {height: 28px; border: 1px solid # cdcdcd; width: 670px ;}
. Mybtn {background-color: # FFF; line-height: 14px; vertical-align: middle; border: 1px solid # CDCDCD; height: 30px; width: 70px ;}
. File {position: absolute; top: 0; right: 80px; height: 24px; filter: alpha (opacity: 0); opacity: 0; width: 260px}
</Style>
</Head>
<Body>
<Div class = "form-group">
<Label class = "control-label"> image </label>
<Br/>
<Input type = 'text' name = 'textfield 'id = 'textfield 'class = 'txt '/>
<Span onclick = "file. click ()" class = "mybtn"> browse... </span>
<Input type = "file" name = "file" class = "file" id = "file" size = "28" onchange = "document. getElementById ('textfield '). value = this. value "/>
<Span onclick = "UpladFile ()" class = "mybtn"> upload </span>
</Div>
</Body>
</Html>
Php code:
Copy codeThe Code is as follows:
<? Php
If (isset ($ _ FILES ["myfile"])
{
$ Ret = array ();
$ UploadDir = 'images'. DIRECTORY_SEPARATOR.date ("Ymd"). DIRECTORY_SEPARATOR;
$ Dir = dirname (_ FILE _). DIRECTORY_SEPARATOR. $ uploadDir;
File_exists ($ dir) | (mkdir ($ dir, 0777, true) & chmod ($ dir, 0777 ));
If (! Is_array ($ _ FILES ["myfile"] ["name"]) // single file
{
$ FileName = time (). uniqid (). '.'. pathinfo ($ _ FILES ["myfile"] ["name"]) ['extension'];
Move_uploaded_file ($ _ FILES ["myfile"] ["tmp_name"], $ dir. $ fileName );
$ Ret ['file'] = DIRECTORY_SEPARATOR. $ uploadDir. $ fileName;
}
Echo json_encode ($ ret );
}
?>
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
